tangyuxian
文章77
标签36
分类5
vue-vuex中Mutation和Action小总结

vue-vuex中Mutation和Action小总结

针对Vuex中Mutation和Action使用小总结

“为什么在VuexMutation只能是同步?可以异步吗?Action可以直接修改State吗?能修改还要Mutaition有什么用?”面试官不动声色道.这咄咄逼人的问题一个接着一个抛出,让本糖一瞬间哑然,当时我瞬间想拍桌站起来喊道:”为什么?哪那么多为什么,犹大定的规则你问他啊?”当然只是想想.

img

平时使用本糖也从来没考虑这么多,使用的时候一直将这些当成游戏规则来看待,现在一起看下游戏规则为什么会这么制定

一 为什么Mutation中是同步函数

其实这如果看官方文档,就能找到其中的缘由,在 Vuex:mutation-必须是同步函数中明确提到,Mustation可以写异步函数,但是问题在于Mustation本身的任务,就是用来修改State中的值,使命单一且重要,同步修改可以让 devtools (下载插件需要代理访问)捕捉到整个State状态值的变化情况,并做出快照,异步函数中的回调函数中修改虽然也可以,但是却让整个修改过程无法追踪

二 Action可以直接修改State吗?

答案依然是可以,但不推荐.就像上面说的,它们都被分配了不同的使命,来各司其职,Action更多的时候是呈现逻辑性质的操作,比如文章的获取,用户登录后的信息等,如果要被记录在状态管理器中,那么在Action中处理就再合适不过,存State时通过commit提交到Mutation,将存值这一任务交给专业人士处理.

严格模式的开启与否将决定着Action是否有资格直接跳过Mutation直接修改State值.

总结来说,无论是Mutation还是Action都可以修改State值,也都可以异步或同步操作.为何对二者的要求却各不相同呢?之所以这么做,一是要做到规范化开发,做到各司其职,二是便于调试和Debug,提高代码稳定性.

既然Mutation的作用是修改State,同时方便devtools记录快照进行debug,那可不可以让MutationAction合二为一,即能直接修改State,也能记录修改状态方便debug呢?

Pinia你值得拥有,看到这个可爱的小菠萝了嘛?

img

本文作者:tangyuxian
本文链接:https://www.tangyuxian.com/2022/05/09/%E5%89%8D%E7%AB%AF/vue/vue-vuex%E4%B8%ADMutation%E5%92%8CAction%E5%B0%8F%E6%80%BB%E7%BB%93/
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可