Vuex的屬性實(shí)例分析

這篇文章主要講解了“Vuex的屬性實(shí)例分析”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“Vuex的屬性實(shí)例分析”吧！

Vuex是專(zhuān)為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。

簡(jiǎn)單來(lái)說(shuō)：Vuex是Vue框架中狀態(tài)管理

圖中綠色虛線包裹起來(lái)的部分就是Vue的核心，state中保存的就是公共狀態(tài)，改變state的唯一方式就是通過(guò)mutations進(jìn)行更改

狀態(tài)管理模式

把組件的共享狀態(tài)抽取出來(lái)，以一個(gè)全局單例模式管理。在這種模式下，組件數(shù)構(gòu)成了一個(gè)巨大的視圖，不管在樹(shù)的哪個(gè)位置，任何組件都能獲取狀態(tài)或者觸發(fā)行為，這就是狀態(tài)管理模式。

應(yīng)用場(chǎng)景有：?jiǎn)雾?yè)應(yīng)用中，組件之間的數(shù)據(jù)狀態(tài)

應(yīng)用實(shí)例：

• 購(gòu)物車(chē)功能

• 下單頁(yè)面選擇優(yōu)惠券按鈕，點(diǎn)擊進(jìn)入優(yōu)惠券頁(yè)面，選擇后返回到下單頁(yè)，數(shù)據(jù)會(huì)綁定回來(lái)，顯示已選擇的優(yōu)惠券

• 登錄狀態(tài)等

Vuex的屬性

• state

• Vuex就是一個(gè)倉(cāng)庫(kù)，倉(cāng)庫(kù)里面放了很多對(duì)象，其中state就是數(shù)據(jù)源存放地，對(duì)應(yīng)一般Vue對(duì)象里面的data

• state里面存放的數(shù)據(jù)是響應(yīng)式的，Vue組件從store中讀取數(shù)據(jù)，若是store中的數(shù)據(jù)發(fā)生改變，依賴(lài)這個(gè)數(shù)據(jù)的組件也會(huì)發(fā)生更新

• 通過(guò)mapState把全局的state和getters映射到當(dāng)前組件的computed計(jì)算屬性中

• getters

• getters可以對(duì)state進(jìn)行計(jì)算操作，它就是store的計(jì)算屬性

• 雖然在組件內(nèi)也可以做計(jì)算屬性，但是getters可以在多組件之間復(fù)用

• 如果一個(gè)狀態(tài)只在一個(gè)組件內(nèi)使用，可以不用getters

Mutations

每個(gè)mutations都有一個(gè)字符串的事件類(lèi)型（type）和一個(gè)回調(diào)函數(shù)（handler），這個(gè)回調(diào)函數(shù)就是實(shí)際進(jìn)行狀態(tài)修改的地方，并且它會(huì)接收state作為第一個(gè)參數(shù)：

const store = new Vuex.Store({
    state:{
        count:1
    },
    mutations:{
        increment(state){
            //變更狀態(tài)
            state.count++
        }
    }
})

不能直接調(diào)用一個(gè)mutation handler。這個(gè)選項(xiàng)更像是事件注冊(cè)，當(dāng)觸發(fā)一個(gè)類(lèi)型為increment的mutations時(shí)，調(diào)用此函數(shù)。要喚醒一個(gè)mutation handler，需要調(diào)用相應(yīng)的type調(diào)用store.commit方法

store.commit('increment')

提交載荷（payload）

可以向store.commit傳入額外的參數(shù)，即mutation的載荷（payload）

state:{
    count:0
},
mutations:{
    increment(state,n){
        state.count += n
    }
}

//組件
store.commit('increment',10)

在大多數(shù)情況下，載荷應(yīng)該是一個(gè)對(duì)象，這安樣可以包含多個(gè)字段并且記錄的mutation會(huì)更易讀

state:{
    count:0
},
mutations:{
    increment(state,payload){
        state.count += payload
    }
}

//組件
store.commit('increment',{
    amount:10
})

Mutation需遵守Vue的響應(yīng)規(guī)則

既然Vuex的store中的狀態(tài)時(shí)響應(yīng)式的，那么當(dāng)我們變更狀態(tài)時(shí)，監(jiān)聽(tīng)狀態(tài)的Vue組件也會(huì)自動(dòng)更新。這也意味著Vuex中的mutation需要與使用Vue一樣遵守一些注意事項(xiàng)：

最好提前在store中初始化好所有所需屬性

當(dāng)需要在對(duì)象上添加新屬性時(shí)，應(yīng)該

mutation必須是同步函數(shù)

使用Vue.set(obj,'newProp,123)

以新對(duì)象替換老對(duì)象。例如，利用對(duì)象展開(kāi)運(yùn)算符

state.obj = {...state.obj,newProp:123}

actions

action類(lèi)似于mutation，不同在于：

action通過(guò)store.dispatch方法觸發(fā)

store.dispatch('increment')

在action內(nèi)部執(zhí)行異步操作

actions:{
    incrementAsync({commit}){
        setTimeout(() => {
            commit('increment')
        },1000)
    }
}

action同樣支持載荷方式和對(duì)象方式進(jìn)行分發(fā)

//以載荷形式分發(fā)
store.dispatch('incrementAsync',{
    amount:10
})
//以對(duì)象形式分發(fā)
store.dispatch({
    type:'incrementAsync',
    amount:10
})

• action提交的是mutation，而不是直接變更狀態(tài)

• action可以包含任意異步操作

module

module可以讓每個(gè)模塊擁有自己的state、mutations、action、getters使得結(jié)構(gòu)非常清晰，方便管理

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
 modules: {
  a: moduleA,
  b: moduleB
})

使用Vuex的好處

• 多層嵌套的組件，兄弟組件間的狀態(tài)會(huì)更好管理維護(hù)

• 緩存一些當(dāng)前要使用的請(qǐng)求遠(yuǎn)程或本地的數(shù)據(jù)集（刷新后會(huì)自動(dòng)銷(xiāo)毀）

• 有了第二條就可以減少向服務(wù)器的請(qǐng)求，節(jié)省資源

• 對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，如果項(xiàng)目足夠復(fù)雜，團(tuán)隊(duì)規(guī)模大，數(shù)據(jù)集中處理更利于程序的穩(wěn)定和維護(hù)

感謝各位的閱讀，以上就是“Vuex的屬性實(shí)例分析”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)Vuex的屬性實(shí)例分析這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！