目的
让代码更好维护,让多种数据分类更加明确
修改store.js
//求和相关配置
const countOptions = {
namespaced:true, //开启命名空间
actions:{
addOdd(context,value){
if(context.state.sum % 2){
context.commit('ADD',value)
}
},
addWait(context,value){
setTimeout(() => {
context.commit('ADD',value)
}, 1000);
}
},
mutations:{
ADD(state,value){
state.sum += value
},
SUBT(state,value){
state.sum -= value
}
},
state:{
sum:0
},
getters:{
bigSum(state){
return state.sum*10
}
}
}
//人员相关配置
const personOptions = {
namespaced:true, //开启命名空间
actions:{},
mutations:{
ADD_PERSON(state,person){
state.personList.unshift(person)
}
},
state:{
list:[
{id:'001',name:'范宁'}
]
},
getters:{}
}
//创建并暴露(导出)store
export default new Vuex.Store({
modules:{
countOptions,
personOptions
}
})
开启命名空间后,组件中读取state
数据
//方式一:自己直接读取
this.$store.state.personOptions.list
//方式二:借助mapState获取
...mapState('countOptions',['sum'])
开启命名空间后,组件中读取getters
数据
//方式一:自己直接读取
this.$store.getters['personOptions/firstPerson']
//方式二:借助mapGetters获取
...mapGetters('countOptions',['bigSum'])
开启命名空间后,组件中调用dispatch
//方式一:自己直接dispatch
this.$store.dispatch('personOptions/addPerson',person)
//方式二:借助mapActions
...mapActions('countOptions',["addOdd","addWait"])
开启命名空间后,组件中调用commit
//方式一:自己直接commit
this.$store.commit('personOptions/ADD_PERSON',person)
//方式二:借助mapMutations
...mapMutations('countOptions',["ADD","SUBT"]),
进一步模块化
可以将每组相关配置都放在单独的js
文件中,注意一定要导出,然后再在index.js
文件中引入