什麼時候使用vuex

使用vuex的時候是如果您需要構建是一箇中大型單頁應用，您很可能會考慮如何更好地在元件外部管理狀態，Vuex將會成為自然而然的選擇。

• 該方法適用於所有品牌電腦

狀態管理

隨著 JavaScript 單頁應用開發日趨複雜，JavaScript 需要管理比任何時候都要多的 state （狀態）。 這些 state 可能包括伺服器響應、快取資料、本地生成尚未持久化到伺服器的資料，也包括 UI 狀態，如啟用的路由，被選中的標籤，是否顯示載入動效或者分頁器等等。

管理不斷變化的 state 非常困難。如果一個 model 的變化會引起另一個 model 變化，那麼當 view 變化時，就可能引起對應 model 以及另一個 model 的變化，依次地，可能會引起另一個 view 的變化。直至你搞不清楚到底發生了什麼。state 在什麼時候，由於什麼原因，如何變化已然不受控制。 當系統變得錯綜複雜的時候，想重現問題或者新增新功能就會變得舉步維艱。

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

在應用中，元件之間的通訊其實是歸根於應用的狀態管理；而應用的狀態是來自多方面的，如何對狀態進行管理，提高程式碼的可維護性，提升開發效率。Vue 的核心庫只關注檢視層，單檔案元件，其模板、邏輯和樣式是內部耦合的，側重資料和檢視的同步；Vue 本身並沒有對資料狀態的管理進行處理，但其提供了另外一個解決方案 Vuex，一個集中式狀態管理的庫；也就是說，你可能不需要 Vuex，它只是對你應用狀態進行管理的一個庫。

Vuex 狀態自管理應用包含以下幾個部分：

• state，驅動應用的資料來源；

• view，以宣告方式將 state 對映到檢視；

• actions，響應在 view 上的使用者輸入導致的狀態變化。

如上圖，Vuex為Vue Components建立起了一個完整的生態圈，包括開發中的API呼叫一環。圍繞這個生態圈，簡要介紹一下各模組在核心流程中的主要功能：

• Vue Components：Vue元件。HTML頁面上，負責接收使用者操作等互動行為，執行dispatch方法觸發對應action進行迴應。

• dispatch：操作行為觸發方法，是唯一能執行action的方法。

• actions：操作行為處理模組。負責處理Vue Components接收到的所有互動行為。包含同步/非同步操作，支援多個同名方法，按照註冊的順序依次觸發。向後臺API請求的操作就在這個模組中進行，包括觸發其他action以及提交mutation的操作。該模組提供了Promise的封裝，以支援action的鏈式觸發。

• commit：狀態改變提交操作方法。對mutation進行提交，是唯一能執行mutation的方法。

• mutations：狀態改變操作方法。是Vuex修改state的唯一推薦方法，其他修改方式在嚴格模式下將會報錯。該方法只能進行同步操作，且方法名只能全域性唯一。操作之中會有一些hook暴露出來，以進行state的監控等。

• state：頁面狀態管理容器物件。集中儲存Vue components中data物件的零散資料，全域性唯一，以進行統一的狀態管理。頁面顯示所需的資料從該物件中進行讀取，利用Vue的細粒度資料響應機制來進行高效的狀態更新。

• getters：state物件讀取方法。圖中沒有單獨列出該模組，應該被包含在了render中，Vue Components通過該方法讀取全域性state物件。

集中式狀態管理的好處

相對於分治(碎片化)的狀態管理，多個狀態分散的跨越在不同元件互動在各個角落，每個 View 會有相對應的 Model 維護狀態；而集中式管理模式則用於將分散於元件的狀進行集中化管理，提供一個全域性的 store 儲存管理應用的狀態。集中式的狀態管理可以讓整體的狀態變化更加明晰，尤其是配合各自的 devtools。

什麼情況下我應該使用 Vuex？

雖然 Vuex 可以幫助我們管理共用狀態，但也附帶了更多的概念和框架。這需要對短期和長期效益進行權衡。

如果您不打算開發大型單頁應用，使用 Vuex 可能是繁瑣冗餘的。確實是如此——如果您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 global event bus 就足夠您所需了。但是，如果您需要構建是一箇中大型單頁應用，您很可能會考慮如何更好地在元件外部管理狀態，Vuex 將會成為自然而然的選擇。

相關免費學習推薦：（視訊）

以上就是什麼時候使用vuex的詳細內容，更多請關注TW511.COM其它相關文章！