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

前端之家收集整理的这篇文章主要介绍了详解vuex中mutation/action的传参方式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

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

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

export default state;

mutation传参

朴实无华的方式

mutation.js

{ //n是从组件中传来的参数 state.count += n; } }

export default mutations;

vue组件中(省去其他代码

对象风格提交参数

mutation.js

{ state.count -= payload.amount; } }

export default mutations;

vue组件

action传参

朴实无华

action.js

export default actions;

mutation.js

{ state.count += n; } }

export default mutations;

vue组件

对象风格

action.js

export default actions;

mutation.js

{ state.count -= payload.amount; } }

export default mutations;

vue组件

action的异步操作

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

返回promise

action.js

{ setTimeout(() => { context.commit('multiplication',payload); resolve("async over"); },2000); }); } }

export default actions;

mutation.js

export default mutations;

vue组件

{ console.log(result); }); } }

在另外一个 action 中组合action

action.js

{ commit('multiplication',payload); return "async over"; }) } }

export default actions;

mutation.js

export default mutations;

vue组件

{ console.log(result); }); } }

使用async函数

action.js

export default actions;

mutation.js

export default mutations;

vue组件

{ ... }); } }

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

猜你在找的Vue相关文章