vuex的使用場景和屬性有哪些

vuex的使用情境：1、使用者的個人資訊管理模組；2、電商項目的購物車模組；3、我的訂單模組；4、在訂單結算頁。 vuex屬性有：1、state，用來儲存變數；2、getters；3、mutations；4、actions；5、modules。

本教學操作環境：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提交，在訂單結算頁，獲取選擇的優惠券，並更新訂單優惠信息；

##相關推薦：《

vue.js教程》

以上是vuex的使用場景和屬性有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！