共计 1387 个字符，预计需要花费 4 分钟才能阅读完成。
来自一名超级美的学妹：🍉Sunday🍉
前言
上篇文章说了为什么在 vue 中有了全局事件总线还要引入 vuex 的问题，这篇着重讲 Vuex 的原理图，晓得原理图才可能明确如何去书写 Vuex 的代码。
一、原理图
来自于 Vuex 官网
从图中咱们能够看到，vuex 中有 Actions、Mutations、State 三个对象，先从字面意思上了解下哈
- Actions：翻译过去即为动作、行为的意思
- Mutations：翻译过去有变动、转变的意思
- 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 整体比喻为大酒店
流程解释：
- 客人来到 vuex 中，客人和服务员说要点 xxxx、xxx 菜（调用 dispatch API，即派发到
actions）。 - 服务员（
actions）接管到申请后，再将客人点的菜名提交给（commit()）给后厨团队。 - 后厨接管到服务员提交过去的菜名，就开始进行制作(即更新数据)，而后通过
mutate（主动触发）传递到 State 中。 - 菜肴制作好后，通过 render 渲染，送到客人背后（更新视图）
再如果你和后厨的 xdm 玩的特地好，特地相熟，你下次来的时候，就间接越过了服务员，间接和后厨的哥们说，明天还是老样子，后厨的兄弟就懂了。
再或者还有上面的这样状况：
你来到大酒店想间接去找后厨的兄弟，然而最近菜单更新了，服务员拦住你说，咱们店的菜肴更新了，你必须要跟我说一下，你要吃什么，才好给你上菜。（菜肴更新了就是向另外一台服务器申请数据的意思）。
心愿通过这个小案例，可能让大家更好的记忆。
后语
大家一起加油！！！如若文章中有不足之处，请大家及时指出，在此郑重感激。
纸上得来终觉浅，绝知此事要躬行。
大家好，我是博主
宁在春：主页一名喜爱文艺却踏上编程这条路线的小青年。
心愿：
咱们，待别日相见时，都已有所成。