关于vue.js:后端小伙伴来学前端了Vuex原理图分析及结合生活案例让大家快速理解

来自一名超级美的学妹：🍉Sunday🍉

前言

上篇文章说了为什么在 vue 中有了全局事件总线还要引入 vuex 的问题，这篇着重讲 Vuex 的原理图，晓得原理图才可能明确如何去书写 Vuex 的代码。

一、原理图

来自于 Vuex 官网

从图中咱们能够看到，vuex 中有 Actions、Mutations、State 三个对象，先从字面意思上了解下哈

1. Actions：翻译过去即为动作、行为的意思
2. Mutations：翻译过去有变动、转变的意思
3. State：翻译过去就是状态的意思，这里的状态其实就是数据的意思。

另外他们三个全部都是 Object 对象{}。

咱们拿一个自加的案例来走一遍这个原理图的流程，让大家更快的了解。

偷了点懒，不想重画这张图，就在原图上操作啦(手动狗头保命😁)

残缺流程大抵就是这八步。至于还没说的backend API 和 Devtools，前面有说滴。

思考

大家有没有感觉 Actions 所处的地位比拟难堪丫，因为就是转交一下，并没啥其余的作用啊。

其实在 Vuex 中，是容许Vue Components 间接调用 commit api 的，即如下

我讲到这里，可能大家更感觉 actions 没啥用啦，其实是有的，还记得我之前没说的backend API 吗

其实backend API 是另一台服务器。

意思就是当咱们调用了 dispatch(zijia) 时，并不知道要自加你，这个时候，咱们就在 actions 中向另一台服务器发送申请，问它咱们要自加几。所以这个时候 actions 还是有用的。存在必会有存在的价值。

Devtools

这里也顺带说一下吧，意思就是可能在 vue-devtools 的调试工具里，看到数据的全副变动，以及批改的历史记录

上面再来通过一个生存案例来对这个图进行一个了解性记忆吧。

对了稍稍补充一下，其实在 vuex 的这个官网图，还少了一点点货色只过它在图中用 vuex 来示意了。

actions、mutations、state 这三个对象都被 store 都管着，多这么个领导者是为了更好的状态治理，因为前面会变得越来越简单。

二、生存案例了解

咱们将流程中参加的四个对象别离形象的比喻为客人、服务员、后厨、菜肴，将 vuex 整体比喻为大酒店

流程解释：

1. 客人来到 vuex 中，客人和服务员说要点 xxxx、xxx 菜（调用 dispatch API，即派发到actions）。
2. 服务员（actions）接管到申请后，再将客人点的菜名提交给（commit()）给后厨团队。
3. 后厨接管到服务员提交过去的菜名，就开始进行制作(即更新数据)，而后通过mutate（主动触发）传递到 State 中。
4. 菜肴制作好后，通过 render 渲染，送到客人背后（更新视图）

再如果你和后厨的 xdm 玩的特地好，特地相熟，你下次来的时候，就间接越过了服务员，间接和后厨的哥们说，明天还是老样子，后厨的兄弟就懂了。

再或者还有上面的这样状况：

你来到大酒店想间接去找后厨的兄弟，然而最近菜单更新了，服务员拦住你说，咱们店的菜肴更新了，你必须要跟我说一下，你要吃什么，才好给你上菜。（菜肴更新了就是向另外一台服务器申请数据的意思）。

心愿通过这个小案例，可能让大家更好的记忆。

后语

大家一起加油！！！如若文章中有不足之处，请大家及时指出，在此郑重感激。

纸上得来终觉浅，绝知此事要躬行。

大家好，我是博主 宁在春：主页

一名喜爱文艺却踏上编程这条路线的小青年。

心愿：咱们，待别日相见时，都已有所成。