vuex中mutation和action的详解

官方的文档解释：

Mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
Action： 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

为何mutation不能包含异步操作？

• 使用层面：代码更高效易维护, 逻辑清晰（规范，而不是逻辑的不允许）；
• 具体原因：为了让devtools 工具能够追踪数据变化；

具体原因详解
每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来（每次状态的改变都会生产一个全新的 state 对象），然后就可以实现 “time-travel” 了。如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。

注： vue-devtools 的时间旅行 - time travel
Vuex 借鉴 Flux 单向数据流思想，采用集中式统一管理保存状态。但是这些状态不会随时间改变而变化。为了使状态，可以被捕获、重播或重现。vue-devtools工具，可以帮助我们的 Vue 应用可以实现这种时间旅行！
每次状态的改变都会生产一个全新的 state 对象，当你想展现什么时间段的状态，只需要切换到那个时间段的 state 对象，所以vuex原则上只能通过mutation 并且非异步更改状态，否则无法实现state修改的记录保留或无法正确记录。