1、目的:让代码更好维护,让多种数据分类更加明确
2.、store.js文件中配置命名空间
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(
{
//配置命名空间在Vuex.Store中
modules:{
countAbout,
personAbout
}
})
3、开启命名空间后,组件中读取state数据:
//方法一:自己直接读取
this.$store.state.personAbout.list
//方法二:借助mapState读取
...mapState('命名空间的名字',['state中的方法名,可以写多个']),
4、开启命名空间后,组件中读取getters数据:
//方法一:自己直接读取
this.$store.getters['getters中的方法名']
//方法二:借助mapGetters读取
...mapGetters('命名空间的名字',['getters中的方法名,可以写多个']),
5、开