详解vuex中mutationaction的传参方式

　　前言

　　在vuex中提交 mutation 是更改状态的唯一方法，并且这个过程是同步的，异步逻辑都应该封装到 action 里面。对于mutation/action，有一个常见的操作就是传参，也就是官网上说的“提交载荷”。

　　这里是关于如何在vue-cli中使用vuex的方法，我们采用将vuex设置分割成不同模块的方法。其中，state模块中配置如下

　　 //vuex中的state const state = { count: 0 } export default state;

　　mutation传参

　　朴实无华的方式

　　mutation.js

　　 //vuex中的mutation const mutations = { increment: (state,n) => { //n是从组件中传来的参数nt += n; } } export default mutations;

　　vue组件中（省去其他代码）

　　 methods: { add(){ //传参it(increment,5); } }

　　对象风格提交参数

　　mutation.js

　　 //vuex中的mutation const mutations = { decrementa: (state,payload) => { state.count -= payload.amount; } } export default mutations;

　　vue组件

　　 methods: { reducea(){ //对象风格传参 this.$store.commit({ type: decrementa, amount: 5 }); }, }

　　action传参

　　朴实无华

　　action.js

　　 /vuex中的action const actions = { increment(context,args){ context.commit(increment,args); } } export default actions;

　　mutation.js

　　 //vuex中的mutation const mutations = { increment: (state,n) => { state.count += n; } } export default mutations;

　　vue组件

　　 methods: { adda(){ //触发action this.$store.dispatch(increment,5); } }

　　对象风格

　　action.js

　　 //vuex中的action const actions = { decrementa(context,payload){ context.commit(decrementa,payload); } } export default actions;

　　mutation.js

　　 //vuex中的mutation const mutations = { decrementa: (state,payload) => { state.count -= payload.amount; } } export default mutations;

　　vue组件

　　 methods: { reduceb(){ this.$store.dispatch({ type: decrementa, amount: 5 }); } }

　　action的异步操作

　　突然就想总结一下action的异步操作。。。。

　　返回promise

　　action.js

　　 //vuex中的action const actions = { asyncMul(context,payload){ //返回promise给触发的store.dispatch return new Promise((resolve,reject) => { setTimeout(() => { context.commit(multiplication,payload); resolve(async over); },2000); }); } } export default actions;

　　mutation.js

　　 //vuex中的mutation const mutations = { multiplication(state,payload){ state.count *= payload.amount; } } export default mutations;

　　vue组件

　　 methods: { asyncMul(){ let amount = { type: asyncMul, amount: 5 } this.$store.dispatch(amount).then((result) => { console.log(result); }); } }

　　在另外一个 action 中组合action

　　action.js

　　 //vuex中的action const actions = { asyncMul(context,payload){ //返回promise给触发的store.dispatch return new Promise((resolve,reject) => { setTimeout(() => { context.commit(multiplication,payload); resolve(async over); },2000); }); }, actiona({dispatch,commit},payload){ return dispatch(asyncMul,payload).then(() => { commit(multiplication,payload); return async over; }) } } export default actions;

　　mutation.js

　　 //vuex中的mutation const mutations = { multiplication(state,payload){ state.count *= payload.amount; } } export default mutations;

　　vue组件

　　 methods: { actiona(){ let amount = { type: actiona, amount: 5 } this.$store.dispatch(amount).then((result) => { console.log(result); }); } }

　　使用async函数

　　action.js

　　 //vuex中的action const actions = { asyncMul(context,payload){ //返回promise给触发的store.dispatch return new Promise((resolve,reject) => { setTimeout(() => { context.commit(multiplication,payload); resolve(async over); },2000); }); }, async actionb({dispatch,commit},payload){ await dispatch(asyncMul,payload); commit(multiplication,payload); } } export default actions;

　　mutation.js

　　 //vuex中的mutation const mutations = { multiplication(state,payload){ state.count *= payload.amount; } } export default mutations;

　　vue组件

　　 methods: { actionb(){ let amount = { type: actionb, amount: 5 } this.$store.dispatch(amount).then(() => { ... }); } }

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。