Vuex之action

一般开发使用mutation已经足够，不过官网推荐mutation不要有异步操作，那么为了规范，我们应该把异步操作的方法都放在vuex提供的action里面。

Action 提交的是 mutation，而不是直接变更状态。

Action 可以包含任意异步操作。

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

Action里面：

export default { scoreAction(store){ store.commit('scoreChange', 15); }}

mutation通过commit调用，action通过dispatch 调用：

this.$store.dispatch('scoreAction');

讲真的，这跟直接调用mutation真的没什么区别，这样看起来反而多此一举，但是使用action最大的好处就是，所有涉及异步操作的都在action中完成，然后通过触发mutation，这样的话所有的状态变更都追踪的到。

Action也支持载荷的格式及传参，跟mutation差不多就不再写了。

辅助函数也差不多：

引入：import { mapActions } from 'vuex'

注入：

...mapActions ([ 'scoreAction',]),...mapActions ({ add: 'scoreAction'})

调用：

this.scoreAction();this.add();

至于组合action这就跟调用promise没什么太大区别，看场景灵活使用。

欢迎关注Coding个人笔记 公众号