1.在Store (Index.js)中定义state,mutations,actions和getters

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedstate from 'vuex-persistedstate'

Vue.use(Vuex)
export default new Vuex.Store({
state: {
playList: [],

},
mutations: {
setPlayList(state, list) {
state.playList = list
},
},
actions: {
selectPlay({commit, state}, {list, index}){
commit('setSequenceList', list)
commit('setPlayList', list)
commit('setCurrentIndex',index)
commit('setPlayState', true)
}
},
getters: {
playList: function (state) {
return state.playList
},

})

2.页面引入

1
2
3
4
5
6
7
8
9
10
11
12
13
import { mapGetters, mapMutations, mapActions,mapState } from "vuex";
export default {
computed: {
...mapGetters([
"playList",
]),
methods: {
...mapMutations({
setPlayList: "setPlayList"
}),
...mapActions(["selectPlay"])
},
}

3.页面直接使用

1
2
3
4
5
6
7
this.playList
this.setPlayList(songlist);
this.selectPlay({
list: this.recommondLists,
index
})
},
1
2
...mapGetters和mapState在computed中使用
...mapAction和mapMutation 在methods中使用