什麼時候該用vuex?

Vuex是什麼

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

為什麼要判斷什麼時候使用Vuex

很簡單的道理，你總不能什麼時候都使用Vuex吧。 魯迅說: --當你無法很好進行資料管理的時候，你才需要用Vuex

但是,使用應用場景該如何判斷？

我已經用vue+vuex進行起碼四五個專案的編寫和上線了。以下是我一些個人的判斷使用場景的心得

1、當一個元件需要多次派發事件時

為什麼說？多次派發事件需要用到vuex?原因很簡單,如果它多次派發事件,必然有其它元件進行接收並呼叫。 如果是一個元件進行接收和呼叫還好,但是如果兩個？三個？甚至四個呢？ 如果派發事件的元件只是派發一個事件,那還比較好管理,一旦進行多次派發那麼維護的難度會以乘法增加

栗子:

此處的購物車的數量需要用vuex。我想很多人有疑問,what?這麼簡單的東西都需要vuex,來管理？ 容我介紹觸發的場景 1、在首頁、分類、商品詳情頁新增商品需要觸發一次 2、在購物車進入編輯狀態,刪除購物車項,需要觸發一次 3、在結算訂單時,需要觸發一次 在首頁、分類、商品詳情頁、刪除購物車項、結算訂單總共就觸發了6次 用vuex的mutations的觸發,控制狀態的就很清晰明瞭,並可以維護性很高

反之,如果每次都呼叫獲取購物車數量的介面(前提得有),效果是實現了,但是每一次的HTTP請求,都是對瀏覽器效能消耗。 對比下來,用vuex的mutations進行觸發,就顯得更加有優勢

以下對應觸發的場景圖

歸根結底: 是為了以後的方便維護，你想想啊。萬一你那天要改，其它四五個地方需要改動。等專案越來越大，加入購車的地方就會越來越多。 保持一個設定購物車數量，那麼再多的情況，你都可以清晰地那裡是設定購物車數量並且需要修改去哪裡修改

2、跨元件共享資料、跨頁面共享資料

在開發Vue專案的時候，已經發現很多次。存在這種情況 封裝了一個基礎元件(即很多地方會用到),根據不用的業務派發不同的事件。但是發現，有時想派發事件都不行，因為父元件根本就沒有引用。 沒有引用父元件跟獲取當前派發事件，並更新資料呢？ 當然了，是用Vuex

栗子:

1、當前是訂單列表頁，訂單列表也點選取消訂單，然後更新對應的訂單列表 2、訂單詳情點選取消按鈕，怎麼更新對應的訂單列表？ 不要說每次進入訂單列表頁面都重新資料，那太浪費效能 這種情況也是用Vuex，state儲存一個狀態，監聽這個狀態，變化時更新對應的列表

栗子:

1、從訂單結算頁，進入選擇優惠券的頁面 2、選擇優惠券的頁面如何儲存選擇的優惠券資訊？ 3、儲存到本地？也行，但不建議儲存到本地，如果有人使壞就很麻煩。當然了，肯定會有那麼無聊的，你不要說肯定沒有。不要問為什麼我會知道 state儲存優惠券資訊，選擇優惠券時，mutations提交，在訂單結算頁，獲取選擇的優惠券，並更新訂單優惠資訊

當然了，使用並不只有兩個。但大多數情況的時候。

為什麼，其它情況不寫下來。只是因為一時半會想不起來，而且，我也不想寫了。 等你把這兩種之後，我覺得，是個人都能舉一反三。