Vue之Action

（1）同步与异步

在 mutation 中混合异步调用会导致你的程序很难调试。

例如，当你调用了两个包含异步回调的 mutation 来改变状态，你怎么知道什么时候回调和哪个先回调呢？

这就是为什么我们要区分这两个概念。在 Vuex 中，mutation 都是同步事务：

store.commit(event-name)
/* 任何由 "event-name" 导致的状态变更都应该在此刻完成 */

为了处理异步操作，vuex出了Action

（2）注册：定义actions动作提交mutation异变函数

目前为止，我们看到，当点击后页面上的值是改变了。我们达到了修改store中状态值的目的，但是，官方并不推荐我们这样直接去修改store里面的值，而是去提交一个actions，在actions中提交mutation再去修改状态值，接下来我们修改index.js文件，先定义actions提交mutation的函数：

【store/index.js】

（3）触发：分发 Action

Action 通过 store.dispatch 方法触发

把commit提交mutations修改为使用dispatch来提交actions，之后我们再点击页面，效果是一样的。

（4）优势---异步执行

乍一眼看上去感觉多此一举，我们直接分发 mutation 岂不更方便？实际上并非如此，还记得 mutation 必须同步执行这个限制么？Action 就不受约束！可以在 action 内部执行异步操作。

【store/index.js】---①异步注册：定义actions动作提交mutation异变函数

【.vue单文件组件】---②触发：分发异步Action

（5）载荷方式和对象方式进行分发

Actions 支持同样的载荷方式和对象方式进行分发

①载荷形式

②对象形式类似

（6）组合 Action----promise

Action 通常是异步的，那么如何知道 action 什么时候结束呢？更重要的是，我们如何才能组合多个 action，以处理更加复杂的异步流程？

首先需要明白 store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise.如果利用 async / await，也可以实现其他组合 action

一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行。

这个之后章节再做介绍。

.