再识vuex——modules

深藏阁楼爱情的钟 2021-12-18 14:19 309阅读 0赞

学习vuex不是难在store的前四个属性上，而是难在前四个属性与第五个属性modules一起使用上。  
经过研究，终于找到了一个好的理解方法上。  
使用 modules的格式：

let   moduleA={
    		state:{   }，
    		getters: {  },
    		mutations:{   },
    		actions:{  }
    }
    let   moduleB={
    		state:{   }，
    		getters: {  },
    		mutations:{   },
    		actions:{  }
    }
    
    const store = new Vuex.Store({
      		modules: {
    	   			 a: moduleA,
    	   			 b: moduleB
    	 		 }，
    	 	state:{   }，
    		getters: {  },
    		mutations:{   },
    		actions:{  }
    })

## 其实不管在modulesA中还是在store中，属性中函数的用法都是一样，如下： ##

//getters有四个参数：state,getters,rootState,rootGetters分别对应:本模块中的state、getters；根模块中的state、getters;
    //在未声明命名空间时，getters是默认注册到根模块的，所以getters和,rootGetters是相同的值。
    //在modulesA中state指的是自己的，rootState指的是根模块store的，两者是不同的，
    //在store中state指的是自己的，rootState指的是根模块store的，两者是相同的，是同一个值。
        getters:{
        	gettersA(state,getters,rootState,rootGetters){
        		console.log("state",state)
        		console.log("getters",getters)
        		console.log("rootState",rootState)
        		console.log("rootGetters",rootGetters)
        	}
        },
        //mutations中都有两个参数，state都是自己模块的state，payload是调用时的自定义变量。（因为是宰相，不容许有二心）
        mutations:{
        	mutationsA(state,payload){
        		console.log("state",state)
        		console.log("payload",payload)
        	}
        },
        //actions中的函数，都是只有两个变量，第二个是payload自定义变量。
        //第一个有点厉害。context其实是一个对象为：{dispatch: ƒ, commit: ƒ, getters: {…}, state: {…}, rootGetters: {…},rootstate: {…}}
       //包含了五部分，这些在modules与store中的意义是一样的，不同的是他们的值。：dispatch与commit是两个执行方法。由于getters与rootGetters是默认注册到根模块的，所以值是一样的。
       在modulesA中state指的是自己的，rootstate指的是根模块store的，与state是不一样。
       在store中state指的是自己的，rootstate指的是根模块store的，与state是一样的。
        actions:{
        	actionsA(context,payload){
        		console.log("context",context)
        		console.log("payload",payload)
        	}
        }

当需要命名空间的时候的操作是：

let   moduleA={
    namespaced :true,
    		state:{   }，
    		getters: {  },
    		mutations:{   },
    		actions:{  }
    }
    //加上namespaced :true就行了。