「後端小夥伴來學前端了」為什麼Vue在有了全域性事件匯流排後還要引入Vuex呢？_寧在春

highlight: an-old-hope theme: awesome-green

這是我參與11月更文挑戰的第22天，活動詳情檢視：2021最後一次更文挑戰

今日的清晨，烏雲散去

前言

上一篇我寫了關於Vue中全域性事件匯流排的相關原理及小案例。

在之前文章有簡單的說過關於我個人理解的 Vue 核心思想（剛學不久，如有不足，請各位大佬及時斧正）

資料的雙向繫結，不用再手動操作DOM元素
元件化開發，將一個頁面劃分成多個小元件，然後再一步一步拼湊而成

元件化開發，最大的痛點可能就是要做到任意間元件通訊，元件間通訊其本質就是資料的共享。

對於元件間的通訊，我在之前也是一步一步寫過來的

元件間利用props實現元件間通訊（適用於父子元件通訊，祖孫元件也行，對兄弟元件不太友好）
元件間利用自定義事件實現元件間通訊（同上）
全域性事件匯流排實現任意元件間通訊（任意間元件都能夠通訊）案例
以及通過第三方庫釋出/訂閱方式實現元件間通訊（大傢俬下了解就好，我個人覺得Vue中事件匯流排比釋出訂閱更符合vue的生態，所以沒有寫這篇文章）

正文...

為什麼引入Vuex呢？

思考 🧐

不知道大家會不會產生這樣的一個疑惑， 全域性事件匯流排 明明已經可以實現任意間元件通訊啦，為什麼還要額外將 Vuex引入Vue的生態呢？這樣的操作不會顯得有些重複嗎？

元件間通訊其實就是實現資料的共享和增刪改查。

在全域性事件匯流排中，通過在vm中beforeCreate生命週期中為 Vue 的原型上新增一個 $bus 屬性，在所有元件都可以利用 $on和$emit在$bus屬性上繫結方法，通過方法引數可以在不同元件傳遞資料。這個方法解決了兄弟元件或爺爺孫子元件這種層級比較多的元件間的資料傳遞。

但是這些資料本身存在的地方是在某一個元件的內部，然後其他的元件通過觸發回撥，來進行資料的修改。也就意味著，如果我們要實現元件通訊，就必須在子元件中寫一個方法來觸發父元件中的事先繫結好的回撥函式。如果有更多更多的元件要操作這個資料呢？？會怎麼樣？？

仔細思考思考🤔，我們修改的是一個共享資料，為什麼還要兩端都寫相似且重複的程式碼呢？

難道我們不能在子元件中寫了，然後父元件中就立馬檢測到資料的變更，然後再更新到檢視層嗎？？

Vuex

Vuex官方文件

在官方文件中，是這麼介紹Vuex的：

它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也整合到 Vue 的官方除錯工具 devtools extension (opens new window)，提供了諸如零配置的 time-travel 除錯、狀態快照匯入匯出等高階除錯功能

vuex就是將所有要共享的資料，全部拉進了同一個群聊，集中式的管理，增刪改查的方法也是同樣如此，你要操作什麼資料，直接呼叫方法即可。

並且vue官方還給出了除錯工具，像我們使用全域性事件匯流排時，操作資料是不會有歷史記錄的，但是用vuex，開啟除錯工具，是可以看到你的操作資料的歷史記錄的，這一點是其他方式無可比擬的。

說重點說重點：為什麼用Vuex哈...

我們的應用非常容易遇到多個元件共享狀態時，單向資料流的簡潔性很容易被破壞：

多個檢視依賴於同一狀態。
來自不同檢視的行為需要變更同一狀態。

對於問題一，傳參的方法對於多層巢狀的元件將會非常繁瑣，並且對於兄弟元件間的狀態傳遞無能為力。

對於問題二，我們經常會採用父子元件直接引用或者通過事件來變更和同步狀態的多份拷貝。

因此，我們為什麼不把元件的共享狀態抽取出來，以一個全域性單例模式管理呢？在這種模式下，我們的元件樹構成了一個巨大的“檢視”，不管在樹的哪個位置，任何元件都能獲取狀態或者觸發行為！

就相當於定義了這樣的一箇中央倉庫，所有元件都能夠獲取到存在裡面的資料，也能夠對資料進行操作，一旦資料改變，也會更新使用了相關資料的元件檢視。

通過定義和隔離狀態管理中的各種概念並通過強制規則維持檢視和狀態間的獨立性，我們的程式碼將會變得更結構化且易維護。

我們通過vuex將所有資料及操作資料的方式都提取出來，不管從程式碼層面，亦或者資料管理方面，都變得更加方面，無需像全域性事件匯流排那樣，都要事先繫結，子元件觸發，再執行回撥函式，才能更新檢視。

建議：

vuex雖然方便了，但是如果你的專案應用並不龐大，其實可以使用簡單的 store 模式。而無需使用vuex，因為這可能讓你的程式碼顯得冗餘。

平常寫個小demo啥的，咱們用用props、全域性事件匯流排就完事啦。

後語

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

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

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

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

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

擺攤了擺攤了

୧⍤⃝🥖長棍麵包 ୧⍤⃝🍔漢堡 ୧⍤⃝🍟薯條 ୧⍤⃝🍗炸雞腿 ୧⍤⃝🍕披薩 ୧⍤⃝🌭熱狗 ୧⍤⃝🥪三明治 ୧⍤⃝🌮可樂餅 ୧⍤⃝🥙夾饃 ୧⍤⃝🥘海鮮披薩 ୧⍤⃝🌯雞肉卷 ୧⍤⃝🍡三色小丸子 ୧⍤⃝🍲燉土豆 ୧⍤⃝🍱便當 ୧⍤⃝🍘仙貝 ୧⍤⃝🍙飯糰 ୧⍤⃝🍛咖哩飯 ୧⍤⃝🍜拉麵 ୧⍤⃝🍝義大利麵 ୧⍤⃝🍣壽司 ୧⍤⃝🍤炸蝦 ୧⍤⃝🎂大蛋糕 ୧⍤⃝🧁紙杯蛋糕 ୧⍤⃝🍰小塊蛋榚 ୧⍤⃝🍮布丁

以上通通一個贊，一個贊你買不了吃虧，一個贊你買不了上當，真正的物有所值