vuex的使用方法

這篇文章主要介紹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的使用方法”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！