Vuex使用場景

wade3po發表於2019-02-02

最近本著學習的心態,拉取了公司大佬最新架構的vue專案好好研究一番。然而在vuex的使用上本人出現了很大的歧義。到底什麼場景使用vuex?於是蒐集了一些資料,但是沒有太權威的文章,只能結合資料整理了一些本人自己的觀點。

先看一下官網給出的:

Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化。

Vue一般是單項資料流,於是:

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

多個檢視依賴於同一狀態。

來自不同檢視的行為需要變更同一狀態。

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

問題二,我們經常會採用父子元件直接引用或者通過事件來變更和同步狀態的多份拷貝。以上的這些模式非常脆弱,通常會導致無法維護的程式碼。

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

另外,通過定義和隔離狀態管理中的各種概念並強制遵守一定的規則,我們的程式碼將會變得更結構化且易維護。

這就是 Vuex 背後的基本思想,借鑑了 Flux、Redux、和 The Elm Architecture。與其他模式不同的是,Vuex 是專門為 Vue.js 設計的狀態管理庫,以利用 Vue.js 的細粒度資料響應機制來進行高效的狀態更新。

這是官網給出的定義,而在我的理解就是:應用遇到多個元件共享狀態時,使用vuex。

於是我整理了以下幾點:

涉及非父子元件之間跨元件共享資料

元件基於資料建立,多個元件使用這個資料,各元件之間的聯絡不可預料

同一個資料在不同頁面控制某個屬性,且多個頁面都能修改這個資料

好吧,實在編不下去了,總結來總結去就是多個元件共享資料或者是跨元件傳遞資料,這些場景下使用vuex,但是一個子元件只在這個父元件之中使用,這是強耦合的,那麼就應該放在頁面的data裡面。

或許是見識和經驗的問題,沒有做過大型專案,沒有遇見資料驅動元件的專案,也沒有做過太多元件之間共享的專案,有人說全部放入vuex對於資料鏈直觀,易維護等等。但是還是不明白為什麼要把data遷移到vuex裡面,然後建立各個頁面專門的store。再用computed獲取資料。

歡迎關注Coding個人筆記 公眾號

相關文章