vuex的使用場景：1、用戶的個(gè)人信息管理模塊；2、電商項(xiàng)目的購物車模塊；3、我的訂單模塊；4、在訂單結(jié)算頁。vuex屬性有：1、state，用來存儲(chǔ)變量；2、getters；3、mutations；4、actions；5、modules。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6&&vuex4.0.2版，DELL G3電腦。

vuex是什么？

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

為什么需要vuex？

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

什么時(shí)候什么情況下使用vuex？

構(gòu)建一個(gè)中大型單頁應(yīng)用，需要考慮到如何更好地在組件外部管理狀態(tài)。

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

vuex的五大屬性

state, getters, mutations, actions, modules。

1. state：vuex的基本數(shù)據(jù)，用來存儲(chǔ)變量

2. geeter：從基本數(shù)據(jù)(state)派生的數(shù)據(jù)，相當(dāng)于state的計(jì)算屬性

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

回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會(huì)接受 state 作為第一個(gè)參數(shù)，提交載荷作為第二個(gè)參數(shù)。

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

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

vuex使用的場景：

• 用戶的個(gè)人信息管理模塊；

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

• 我的訂單模塊，訂單列表也點(diǎn)擊取消訂單，然后更新對應(yīng)的訂單列表，這種情況也是用Vuex，state儲(chǔ)存一個(gè)狀態(tài)，監(jiān)聽這個(gè)狀態(tài)，變化時(shí)更新對應(yīng)的列表；

• 從訂單結(jié)算頁，進(jìn)入選擇優(yōu)惠券的頁面，選擇優(yōu)惠券的頁面。如何保存選擇的優(yōu)惠券信息？state保存優(yōu)惠券信息，選擇優(yōu)惠券時(shí)，mutations提交，在訂單結(jié)算頁，獲取選擇的優(yōu)惠券，并更新訂單優(yōu)惠信息；