目录
模块化+命名空间
一、目的
让代码更好维护，让多种数据分类更加明确
二、修改store.js
const countAbout = {
namespaced:true,//开启命名空间
state:{x:1},
mutations:{...},
actions:{...},
getters:{...}
}
const personAbout = {
namespaced:true,//开启命名空间
state:{x:1},
mutations:{...},
actions:{...},
getters:{
bigSum(){
return state.sum*10
}
}
}
const store = new Vuex.Store({
modules:{
countAbout,
personAbout
}
})三、开启命名空间后，组件中读取state数据
//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject'])四、开启命名空间后，组件中读取getters数据
//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum])五、开启命名空间后，组件中调用dispatch
//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})六、开启命名空间后，组件中调用commit
//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'})