vuex有哪些使用場(chǎng)景和屬性

本篇內(nèi)容介紹了“vuex有哪些使用場(chǎng)景和屬性”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

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

vuex是什么？

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

為什么需要vuex？

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

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

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

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

vuex的五大屬性

state, getters, mutations, actions, modules。

1. state：vuex的基本數(shù)據(jù)，用來(lái)存儲(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使用的場(chǎng)景：

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

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

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

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

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