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

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

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

狀態(tài)管理模式

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

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

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

• 購(gòu)物車功能
• 下單頁(yè)面選擇優(yōu)惠券按鈕，點(diǎn)擊進(jìn)入優(yōu)惠券頁(yè)面，選擇后返回到下單頁(yè)，數(shù)據(jù)會(huì)綁定回來，顯示已選擇的優(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ā)生改變，依賴這個(gè)數(shù)據(jù)的組件也會(huì)發(fā)生更新
  • 通過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è)字符串的事件類型（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è)類型為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à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ì)象展開運(yùn)算符

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

actions

action類似于mutation，不同在于：

action通過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)銷毀）
• 有了第二條就可以減少向服務(wù)器的請(qǐng)求，節(jié)省資源
• 對(duì)于開發(fā)者來說，如果項(xiàng)目足夠復(fù)雜，團(tuán)隊(duì)規(guī)模大，數(shù)據(jù)集中處理更利于程序的穩(wěn)定和維護(hù)

參考文獻(xiàn)：

https://v3.vuex.vuejs.org/zh/

到此這篇關(guān)于Vuex的屬性的文章就介紹到這了,更多相關(guān)Vuex的屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論