1️⃣ Action

Action 类似于 mutation，不同在于：

  1.   1. Action 提交的是 mutation，而不是直接变更状态。
  2.   2. Action 可以包含任意异步操作

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters
image.png
005.gif
实践中，我们会经常用到 ES2015 的 参数解构 (opens new window)来简化代码（特别是我们需要调用 commit 很多次的时候）：

  1.   actions: {
  2.     countAddActions({ commit }) {
  3.       commit('countAddMutations')
  4.     }
  5.   }

1️⃣ 分发 Action

Action 通过 store.dispatch 方法触发：
乍一眼看上去感觉多此一举，我们直接分发 mutation 岂不更方便？实际上并非如此，还记得 mutation 必须同步执行这个限制么？Action 就不受约束！我们可以在 action 内部执行异步操作：
image.png
006.gif
Actions 支持同样的载荷方式和对象方式进行分发：
image.png
007.gif

1️⃣ 在组件中分发 Action

你在组件中使用 this.$store.dispatch(‘xxx’) 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）：
组件中使用 mapActions 和其他 map…… 的方式相同

1️⃣ 组合 Action

Action 通常是异步的，那么如何知道 action 什么时候结束呢？更重要的是，我们如何才能组合多个 action，以处理更加复杂的异步流程？
首先，你需要明白 store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise：
image.png
在另外一个 action 中也可以：

  1. actions: {
  2.   // ...
  3.   actionB ({ dispatch, commit }) {
  4.     return dispatch('actionA').then(() => {
  5.       commit('someOtherMutation')
  6.     })
  7.   }
  8. }

最后，如果我们利用 async / await，我们可以如下组合 action：

  1. // 假设 getData() 和 getOtherData() 返回的是 Promise
  2. actions: {
  3.   async actionA ({ commit }) {
  4.     commit('gotData', await getData())
  5.   },
  6.   async actionB ({ dispatch, commit }) {
  7.     await dispatch('actionA') // 等待 actionA 完成
  8.     commit('gotOtherData', await getOtherData())
  9.   }
  10. }

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