vue 使用vuex在頁面跳轉的實現

學習時候碰到的需求場景：我的音樂列表，點擊一個音樂項跳轉到音樂詳情頁
第一種方式：使用 router 動態路由傳參，將需要的數據帶過去
音樂列表頁組件：

音樂詳情頁組件：

音樂列表頁通過selectSong方法傳參，在音樂詳情頁的掛載完成裏面將數據賦給songDetail，使其渲染頁面。
第二種方式：使用vuex；下面有補充vuex的相關代碼

音樂詳情組件：

音樂列表頁中通過引入mutations,將點擊的li的數據提交傳遞到store中的song。在詳情頁中引入getters,獲取store中的song數據。
這樣在router裏面就不需要配置動態路徑參數，就簡單的字符串。搭配使用vuex也能實現之前動態路由傳參的效果啦。

在這裏記錄下這個簡單vuex操作。也是由於自己對vuex不太熟悉，希望下次需要使用時可以來複習複習。

vuex的相關操作代碼：新建一個store文件，將state,mutations，getters都單獨建文件，在store的index.js中引入。同時要在main.js中將引入store並將其注入到根元素中。

//index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from  './mutations'
import getters from './getters'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations,
  getters,
})

//state.js
const state = {
 song:{}
}
export default state

//mutations.js
const mutations = {
    get_song(state,song){
        state.song = song
    }
}
export default mutations

//getters.js
const getters = {
    song: state => state.song
}
export default getters