來自一名超級美的學妹：🍉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玩的特別好，特別熟悉，你下次來的時候，就直接越過了服務員，直接和后廚的哥們說，今天還是老樣子，后廚的兄弟就懂了。

再或者還有下面的這樣情況：

你來到大酒店想直接去找后廚的兄弟，但是最近菜單更新了，服務員攔住你說，我們店的菜肴更新了，你必須要跟我說一下，你要吃什么，才好給你上菜。（菜肴更新了就是向另外一臺服務器請求數據的意思）。

---

希望通過這個小案例，能夠讓大家更好的記憶。

后語

大家一起加油！！！如若文章中有不足之處，請大家及時指出，在此鄭重感謝。

紙上得來終覺淺，絕知此事要躬行。

大家好，我是博主寧在春：主頁

一名喜歡文藝卻踏上編程這條道路的小青年。

希望：我們，待別日相見時，都已有所成。

總結

以上是生活随笔為你收集整理的「后端小伙伴来学前端了」Vuex原理图分析及结合生活案例让大家快速理解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。