Vue学习笔记-模块化+命名空间

目的

让代码更好维护，让多种数据分类更加明确（不同的模块挤在一个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方法声明中自己填写