详解vuex中mutation/action的传参方式

在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是从组件中传来的参数 state.count += n; } } export default mutations;

vue组件中(省去其他代码)

methods: { add(){ //传参 this.$store.commit('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(() => { ... }); } }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/36e6f41e0a11fc0cd3f0b2ca006eba55.html