详解vuex中mutation/action的传参方式
网络编程 2021-07-04 16:46www.168986.cn编程入门
这篇文章主要介绍了详解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.mit('increment',5); } }
对象风格提交参数
mutation.js
//vuex中的mutation const mutations = { decrementa: (state,payload) => { state.count -= payload.amount; } } export default mutations;
vue组件
methods: { reducea(){ //对象风格传参 this.$store.mit({ type: 'decrementa', amount: 5 }); }, }
action传参
朴实无华
action.js
/vuex中的action const actions = { increment(context,args){ context.mit('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.mit('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.mit('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.mit('multiplication',payload); resolve("async over"); },2000); }); }, actiona({dispatch,mit},payload){ return dispatch('asyncMul',payload).then(() => { mit('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.mit('multiplication',payload); resolve("async over"); },2000); }); }, async actionb({dispatch,mit},payload){ await dispatch('asyncMul',payload); mit('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(() => { ... }); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程