1. 目的:让代码更好维护,让多种数据分类更加明确
2. 修改store.js
为了解决不同模块命名冲突的问题,将不同模块的namespaced:true,之后在不同的页面中引入getters、actions、mutations、state时,需要加上所属的模块名
const countAbout = {
namespaced: true, //开启命名空间
state:{
x: 1,
},
mutations: {
....},
actions:{
....},
getters:{
bigSum(state) {
return state.sum * 10
}
}
}
const personAbout = {
namespaced: true, //开启命名空间
state:{
....},
mutations:{
....},
actions:{
....},
}
const store = new Vuex.Store({
modules: {
countAbout,
personAbout
})
3. 开启命名空间后,组件中读取state数据
//方式一:直接读取
this.$store.state.personAbout.list
//方式二:借助mapState读取
...mapState('countAbout',['sum','school','subject'])
4. 开启命名空间后,组件中读取getters数据
//方式一:直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二:借助mapGetters读取
...mapGetters('countAbout',['bigSum'])
5. 开启命名空间后,组件中调用dispatch
//方式一:自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二:借助mapActions
...mapActions('countAbout',{
incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
6. 开启命名空间后,组件中调用commit
//方式一:自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二:借助mapMutations
...mapMutations('countAbout',{
increment:'JIA',decrement:'JIAN'})
完整示例如下:结合示例查看说明更好理解
src/store/index.js