今日清晨,烏雲散去
前言
上一篇我寫了關於Vue中全局事件總線的相關原理及小案例。
在之前文章有簡單的說過關於我個人理解的 Vue 核心思想(剛學不久,如有不足,請各位大佬及時斧正)
- 數據的雙向綁定,不用再手動操作DOM元素
- 組件化開發,將一個頁面划分成多個小組件,然后再一步一步拼湊而成
組件化開發,最大的痛點可能就是要做到任意間組件通信,組件間通信其本質就是數據的共享。
對於組件間的通信,我在之前也是一步一步寫過來的
- 組件間利用
props
實現組件間通信 (適用於父子組件通信,祖孫組件也行,對兄弟組件不太友好) - 組件間利用
自定義事件
實現組件間通信 (同上) - 全局事件總線實現任意組件間通信 (任意間組件都能夠通信)案例
- 以及通過第三方庫發布/訂閱方式實現組件間通信(大家私下了解就好,我個人覺得Vue中事件總線比發布訂閱更符合生態,所以沒有寫這篇文章)
正文...
為什么引入Vuex呢?
思考 🧐
不知道大家會不會產生這樣的一個疑惑, 全局事件總線
明明已經可以實現任意間組件通信啦,為什么還要額外將 Vuex
引入Vue
的生態呢?這樣的操作不會顯得有些重復嗎?
組件間通信其實就是實現數據的共享和增刪改查。
在全局事件總線中,通過在vm
中beforeCreate
生命周期中為 Vue 的原型上添加一個 $bus
屬性,在所有組件都可以利用 $on
和$emit
在$bus
屬性上綁定方法,通過方法參數可以在不同組件傳遞數據。這個方法解決了兄弟組件或爺爺孫子組件這種層級比較多的組件間的數據傳遞。
但是這些數據本身存在的地方是在某一個組件的內部,然后其他的組件通過觸發回調,來進行數據的修改。也就意味着,如果我們要實現組件通信,就必須在子組件中寫一個方法來觸發父組件中的事先綁定好的回調函數。如果有更多更多的組件要操作這個數據呢??會怎么樣??
仔細思考思考🤔,我們修改的是一個共享數據,為什么還要兩端都寫相似且重復的代碼呢?
難道我們不能在子組件中寫了,然后父組件中就立馬檢測到數據的變更,然后再更新到視圖層嗎??
Vuex
在官方文檔中,是這么介紹Vuex的:
它采用集中式存儲管理應用的所有組件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension (opens new window),提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能
vuex就是將所有要共享的數據,全部拉進了同一個群聊,集中式的管理,增刪改查的方法也是同樣如此,你要操作什么數據,直接調用方法即可。
並且vue官方還給出了調試工具,像我們使用全局事件總線時,操作數據是不會有歷史記錄的,但是用vuex,打開調試工具,是可以看到你的操作數據的歷史記錄的,這一點是其他方式無可比擬的。
說重點說重點:為什么用Vuex哈...
我們的應用非常容易遇到多個組件共享狀態時,單向數據流的簡潔性很容易被破壞:
- 多個視圖依賴於同一狀態。
- 來自不同視圖的行為需要變更同一狀態。
對於問題一,傳參的方法對於多層嵌套的組件將會非常繁瑣,並且對於兄弟組件間的狀態傳遞無能為力。
對於問題二,我們經常會采用父子組件直接引用或者通過事件來變更和同步狀態的多份拷貝。
因此,我們為什么不把組件的共享狀態抽取出來,以一個全局單例模式管理呢?在這種模式下,我們的組件樹構成了一個巨大的“視圖”,不管在樹的哪個位置,任何組件都能獲取狀態或者觸發行為!
就相當於定義了這樣的一個中央倉庫,所有組件都能夠獲取到存在里面的數據,也能夠對數據進行操作,一旦數據改變,也會更新使用了相關數據的組件視圖。
通過定義和隔離狀態管理中的各種概念並通過強制規則維持視圖和狀態間的獨立性,我們的代碼將會變得更結構化且易維護。
我們通過vuex將所有數據及操作數據的方式都提取出來,不管從代碼層面,亦或者數據管理方面,都變得更加方面,無需像全局事件總線那樣,都要事先綁定,子組件觸發,再執行回調函數,才能更新視圖。
建議:
vuex雖然方便了,但是如果你的項目應用並不龐大,其實可以使用簡單的 store 模式。而無需使用vuex,因為這可能讓你的代碼顯得冗余。
平常寫個小demo啥的,咱們用用props、全局事件總線就完事啦。
后語
大家一起加油!!!如若文章中有不足之處,請大家及時指出,在此鄭重感謝。
紙上得來終覺淺,絕知此事要躬行。
大家好,我是博主
寧在春
:主頁一名喜歡文藝卻踏上編程這條道路的小青年。
希望:
我們,待別日相見時,都已有所成
。
擺攤了擺攤了
୧⍤⃝🥖長棍面包
୧⍤⃝🍔漢堡
୧⍤⃝🍟薯條
୧⍤⃝🍗炸雞腿
୧⍤⃝🍕披薩
୧⍤⃝🌭熱狗
୧⍤⃝🥪三明治
୧⍤⃝🌮可樂餅
୧⍤⃝🥙夾饃
୧⍤⃝🥘海鮮披薩
୧⍤⃝🌯雞肉卷
୧⍤⃝🍡三色小丸子
୧⍤⃝🍲燉土豆
୧⍤⃝🍱便當
୧⍤⃝🍘仙貝
୧⍤⃝🍙飯團
୧⍤⃝🍛咖喱飯
୧⍤⃝🍜拉面
୧⍤⃝🍝意大利面
୧⍤⃝🍣壽司
୧⍤⃝🍤炸蝦
୧⍤⃝🎂大蛋糕
୧⍤⃝🧁紙杯蛋糕
୧⍤⃝🍰小塊蛋榚
୧⍤⃝🍮布丁
以上通通一個贊,一個贊你買不了吃虧,一個贊你買不了上當,真正的物有所值