1.State
观点:state中的数据,Vuex规定只能通过mutations来进行提交操作,基本在组件中,调取相关mutations、actions等就能满足要求,所以,个人觉得state在组件中读取没有特殊情况下的话,也没多大意义。
...mapMutations(['moduleAMutation']) 映射(moduleAMutation)为store里面mutations定义的方法名
//moduleA--模块A
const moduleA = {
state:{
count:888
}
}
//组件中,获取State的数据
基础获取方式:(通过该方式获取的,可以写在computed计算属性内,这样看着不复杂)
获取父store中的state下的count值:{{this.$store.state.count}}
获取moduleA模块中的state下的count值:{{this.$store.state.moduleA.count}}
mapState辅助函数获取方式:
获取父store中的state下的count值:{{count}}
获取moduleA模块中的state下的count值:{{countA}}
2.Getters
rootState和 rootGetters参数顺序不要写反,一定是state在前,getter在后面,这是vuex的默认参数传递顺序。
rootGetters参数中,包括根store以及模块中的所有getters方法,直接rootGetters.方法名即可获取到。
有这样的一个场景: Vuex 定义了某个数据 list, 它是一个数组,如果只想得到小于 10 的数据,最容易想到的方法可能是在组件的计算属性里进行过滤。这样写完全没有问题。但如果还有其他的组件也需要过滤后的数据时,就得把 computed 的代 码完全复制一份,而且需要修改过滤方法时,每个用到的组件都得修改,这明显不是我们期望的结 果。如果能将 computed的方法也提取出来就方便多了, getters 就是来做这件事的。
个人观点:针对以上这个场景,getters其实就相当于是一个普通方法。getters和mutations/actions之间其实没有任何关系,所以说,在此处getters只要能获取到根store或者兄弟模块的state参数值,getters方法,它的目标其实就已经达到了
//模块中
const moduleA = {
getters:{
showStateData(state,getters,rootState,rootGetters){
console.log('当前模块的count值:'+state.countA);
console.log('根store中的count值:'+rootState.count);
console.log('兄弟模块moduleB中的countB值:'+rootState.moduleB.countB);
console.log('根store中的名为increNum的getters方法:'+rootGetters.increNum);
console.log('兄弟模块moduleB中的名为moduleBGetter的getters方法:'+rootGetters.moduleBGetter);
},
======================================================================================================
//就是此处。该getters针对下面组件中有参数的情况
moduleAGetter:(state,rootState,rootGetters)=>(param,name)=>{
console.log(param)
console.log(name)
}
}
}
//组件中使用时,如何传参问题
我是Body
3.Mutations
mutations,唯一的用途就是:用来修改state中的数据。他不可能去拿根store或者兄弟模块的getters,mutations,actions等。
个人观点:mutaions只能修改state中的数据,况且应该是只能修改本模块的state中的数据,所以它是无法拿到根store和兄弟模块的state的值,只能拿到自己模块的state值
//模块中
const moduleA = {
mutations:{
moduleAMutation(state){
console.log('当前模块的count值:'+state.count);
},
=======================================================================================================
//paramMutation针对下面组件中传参情况下使用
paramMutation(state,obj){
console.log(obj.id);
console.log(obj.name);
console.log('A模块中的count属性值:'+state.count);
},
}
}
//组件中使用时,如何传参问题
//目前个人研究完,模块中的mutaion中,默认第一个传递参数是state,这个是Vuex定死的的,剩下的自定义参数部分
//个人研究发现我们只能传递一个。如果要传递多个参数,只能以对象的形式传递。如有错误或者指正,欢迎评论修改
我是Body
4.Actions
Actions主要用来①提交mutations ②执行异步操作
Vuex为Actions提供rootState参数,来获取根store,兄弟模块中的数据。
个人观点:既然已经分模块,各个模块数据之间要相互独立,所以模块A中的actions也不可能去提交模块B或者跟store中的mutations吧,所以actions部分,只能获取到根store或者兄弟模块中的state数据即可
actions 回调:
https://www.jianshu.com/p/3ac5051656ba
https://segmentfault.com/q/1010000012992271
actions: {
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve()
}, 1000)
})
}
}
this.$store.dispatch('getUserAuth').then(()=>{
// 接口请求完成后
})
getCertificationStatus(context, vm){
return new Promise((resolve, reject) => {
axios.post('/realNameUtils/gotoStatusPage')
.then((res)=>{
context.commit('certificationStatus',res.data.content)
})
})
}
}
// 获取编号
async getNumber() {
// 在 actions 函数里 await 也行 看具体需求 此例只作为演示 await 调用
const obj = await this.$store.dispatch(`${moduleName}/getContractNumber`)
this.contractInfo.fileNo = obj.fileNo
},
//模块中
const moduleA = {
actions:{
getStateData({state,commit,getters,rootState,rootGetters}){
console.log('当前模块的count值:'+state.count);
console.log('根store中的count值:'+rootState.count);
console.log('兄弟模块moduleB中的count值:'+rootState.moduleB.count);
rootGetters.increment();//获取根store中的名为increment的getters方法
getters.moduleAIncrement();//获取当前模块中的getters方法,传参的话直接在括号中传即可,可以使多个参数,也可以是一个obj对象
},
=======================================================================================================
//moduleAAction针对下面组件中传参情况下使用
moduleAAction({state,commit,rootState},obj){//此处传递了一个obj对象参数
console.log(state)
console.log(obj.id);
console.log(obj.name);
console.log('A模块中的count属性值:'+state.count);
console.log('父模块中的count属性值:'+rootState.count);
console.log('兄弟模块moduleB中的count属性:'+rootState.moduleB.count);
commit('moduleAIncr',obj.id);//此处为将obj对象的id参数,继续提交mutaions使用
}
},
mutations:{
//此处额外附名为moduleAIncr的mutations方法,仅用作下面部分参考使用
moduleAIncr:(state,num)=>{
console.log(num);
state.count +=num;
console.log(state.count)
}
}
}
//组件中使用时,如何传参问题(其实和上面的Mutations传参一样,没有区别)
我是Body