目的

让代码更好维护，让多种数据分类更加明确（不同的模块挤在一个index.js中显得臃肿且不方便管理）

实现方式

1. 修改store/index.js(也可以将不同模块分别写在不同的js文件中)

   const countAbout = {//开启命名空间namespaced:true,actions:{......},mutations:{......},state:{sum:0,},getters:{bigSum(state){return state.sum*10}}
   }const personAbout = {namespace = true,//开启命名空间state = {list:[xxx]},mutations = {...},actions = {...}
   }const store = new Vuex.Store({modules:{countAbout,personAbout}
   })
   

2. 开启命名空间后，组件读取各个模块的state数据

   //方式一：直接读取
   this.$store.state.countAbout.sum
   //方式二：借助mapState读取
   ...mapState('countAbout',['sum',...])
   

3. 组件读取各个模块的getters数据

   //方式一：直接读取
   this.$store.getters['personAbout/firstPersonName']
   //方式二：借助mapGetters读取
   ...mapGetters('personAbout',['firstPersonName'])
   

4. 组件调用dispatch

   //方式一：直接调用
   this.$store.dispatch('personAbout/addPerson',value)
   //方式二：借助mapActions
   ...mapActions('personAbout',{addPerson:'addPerson'})
   

5. 组件调用commit

   //方法一：直接调用
   this.$store.commit('personAbout/ADD_PERSON',value)
   //方式二：借助mapMutations
   ...mapMutations('personAbout',{ADD_PERSON:'ADD_PERSON'})
   

注意：mapActions和mapMutation中无法填写函数参数，需要在html组件的@click方法声明中自己填写