Vuex模块化 + namespaced

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