Vuex模块化+命名空间
1.目的：让代码更好维护，让多种数据分类更加明确。
2.修改store.js
const counAbout={
namespaced:true,//开启命名空间
state:{x:1},
actions:{...},
mutations:{...},
getters:{
bigSum(state){
return state.sum*10
}
}
}
const personAbout={
namespaced:true,//开启命名空间
state:{x:1},
actions:{...},
mutations:{...}
}
const store=new Vuex.Store({
modules:{
counAbout,
personAbout
}
})
3.开启命名空间后，组件中读取state数据
//方式一，自己直接读取
this.$store.state.personAbout.list,
//方式二，借助mapState读取
...mapState('countAbout',['sum','school','subject'])
4.开区命名空间后，组件中读取getters数据
//方式一、自己直接读取
this.$store.getters['PersonModule/listHead'],
//方式二、借助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'})
