vuex有哪些使用場景和屬性

本篇內容介紹了“vuex有哪些使用場景和屬性”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

本教程操作環境：windows7系統、vue2.9.6&&vuex4.0.2版，DELL G3電腦。

vuex是什么？

vuex是一個用來管理組件之間通信的插件，它是一個專為【vue.js】應用程序開發的狀態管理模式，它解決了組件之間同一狀態的共享問題，它能夠更好地在組件外部管理狀態。

為什么需要vuex？

當多個組件依賴于同一個狀態時，由于多層組件之間的嵌套使得傳參數的方法變得更加復雜，另外如果使用父子組件直接飲用或者通過事件來變更和同步狀態的多酚拷貝，會使得該模式變得脆弱，從而無法維護代碼。

什么時候什么情況下使用vuex？

構建一個中大型單頁應用，需要考慮到如何更好地在組件外部管理狀態。

注意：如果不是開發大型單頁應用，使用vuex可能是繁瑣冗余的，也就是本來很快就可以開發完成的項目，用了vuex，結果卻復雜了。一般簡單的store模式就可以了。

vuex的五大屬性

state, getters, mutations, actions, modules。

1. state：vuex的基本數據，用來存儲變量

2. geeter：從基本數據(state)派生的數據，相當于state的計算屬性

3. mutation：提交更新數據的方法，必須是同步的(如果需要異步使用action)。每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。

回調函數就是我們實際進行狀態更改的地方，并且它會接受 state 作為第一個參數，提交載荷作為第二個參數。

4. action：和mutation的功能大致相同，不同之處在于 ==》1. Action 提交的是 mutation，而不是直接變更狀態。 2. Action 可以包含任意異步操作。

5. modules：模塊化vuex，可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結構非常清晰，方便管理。

vuex使用的場景：

• 用戶的個人信息管理模塊；

• 電商項目的購物車模塊，每次都調用獲取購物車數量的接口(前提得有)，效果是實現了,但是每一次的HTTP請求,都是對瀏覽器性能消耗。 對比下來,用vuex的mutations進行觸發,就顯得更加有優勢；

• 我的訂單模塊，訂單列表也點擊取消訂單，然后更新對應的訂單列表，這種情況也是用Vuex，state儲存一個狀態，監聽這個狀態，變化時更新對應的列表；

• 從訂單結算頁，進入選擇優惠券的頁面，選擇優惠券的頁面。如何保存選擇的優惠券信息？state保存優惠券信息，選擇優惠券時，mutations提交，在訂單結算頁，獲取選擇的優惠券，并更新訂單優惠信息；

“vuex有哪些使用場景和屬性”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！