详解vuex中mutation/action的传参方式
前言
在vuex中提交mutation是更改状态的唯一方法,并且这个过程是同步的,异步逻辑都应该封装到action里面。对于mutation/action,有一个常见的操作就是传参,也就是官网上说的“提交载荷”。
这里是关于如何在vue-cli中使用vuex的方法,我们采用将vuex设置分割成不同模块的方法。其中,state模块中配置如下
//vuex中的state conststate={ count:0 } exportdefaultstate;
mutation传参
朴实无华的方式
mutation.js
//vuex中的mutation constmutations={ increment:(state,n)=>{ //n是从组件中传来的参数 state.count+=n; } } exportdefaultmutations;
vue组件中(省去其他代码)
methods:{ add(){ //传参 this.$store.commit('increment',5); } }
对象风格提交参数
mutation.js
//vuex中的mutation constmutations={ decrementa:(state,payload)=>{ state.count-=payload.amount; } } exportdefaultmutations;
vue组件
methods:{ reducea(){ //对象风格传参 this.$store.commit({ type:'decrementa', amount:5 }); }, }
action传参
朴实无华
action.js
/vuex中的action constactions={ increment(context,args){ context.commit('increment',args); } } exportdefaultactions;
mutation.js
//vuex中的mutation constmutations={ increment:(state,n)=>{ state.count+=n; } } exportdefaultmutations;
vue组件
methods:{ adda(){ //触发action this.$store.dispatch('increment',5); } }
对象风格
action.js
//vuex中的action constactions={ decrementa(context,payload){ context.commit('decrementa',payload); } } exportdefaultactions;
mutation.js
//vuex中的mutation constmutations={ decrementa:(state,payload)=>{ state.count-=payload.amount; } } exportdefaultmutations;
vue组件
methods:{ reduceb(){ this.$store.dispatch({ type:'decrementa', amount:5 }); } }
action的异步操作
突然就想总结一下action的异步操作。。。。
返回promise
action.js
//vuex中的action constactions={ asyncMul(context,payload){ //返回promise给触发的store.dispatch returnnewPromise((resolve,reject)=>{ setTimeout(()=>{ context.commit('multiplication',payload); resolve("asyncover"); },2000); }); } } exportdefaultactions;
mutation.js
//vuex中的mutation constmutations={ multiplication(state,payload){ state.count*=payload.amount; } } exportdefaultmutations;
vue组件
methods:{ asyncMul(){ letamount={ type:'asyncMul', amount:5 } this.$store.dispatch(amount).then((result)=>{ console.log(result); }); } }
在另外一个action中组合action
action.js
//vuex中的action constactions={ asyncMul(context,payload){ //返回promise给触发的store.dispatch returnnewPromise((resolve,reject)=>{ setTimeout(()=>{ context.commit('multiplication',payload); resolve("asyncover"); },2000); }); }, actiona({dispatch,commit},payload){ returndispatch('asyncMul',payload).then(()=>{ commit('multiplication',payload); return"asyncover"; }) } } exportdefaultactions;
mutation.js
//vuex中的mutation constmutations={ multiplication(state,payload){ state.count*=payload.amount; } } exportdefaultmutations;
vue组件
methods:{ actiona(){ letamount={ type:'actiona', amount:5 } this.$store.dispatch(amount).then((result)=>{ console.log(result); }); } }
使用async函数
action.js
//vuex中的action constactions={ asyncMul(context,payload){ //返回promise给触发的store.dispatch returnnewPromise((resolve,reject)=>{ setTimeout(()=>{ context.commit('multiplication',payload); resolve("asyncover"); },2000); }); }, asyncactionb({dispatch,commit},payload){ awaitdispatch('asyncMul',payload); commit('multiplication',payload); } } exportdefaultactions;
mutation.js
//vuex中的mutation constmutations={ multiplication(state,payload){ state.count*=payload.amount; } } exportdefaultmutations;
vue组件
methods:{ actionb(){ letamount={ type:'actionb', amount:5 } this.$store.dispatch(amount).then(()=>{ ... }); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。