vuex中mutation和action的详解
官方文档解释:Mutation:更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Action: 类似于 mutation,不同在于:Action 提交的是 mutation,而不是直接变更状态。Action 可以包含任意异步操作。单纯从使用的角度去看:代码更高效易维护, 逻辑清晰;只是规范,而不是逻辑的不允许,只是为了让这个工具能够追踪数据变化;为何mutation不能
官方的文档解释:
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修改的记录保留或无法正确记录。
更多推荐
所有评论(0)