詳解Vuex的屬性

更新時間：2022年08月06日 08:45:26 作者：shallow-dreamer

Vuex是專為Vue.js應用程序開發(fā)的狀態(tài)管理模式，這篇文章主要介紹了Vuex的屬性，本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

狀態(tài)管理模式

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

應用場景有：單頁應用中，組件之間的數(shù)據(jù)狀態(tài)

應用實例：

購物車功能
下單頁面選擇優(yōu)惠券按鈕，點擊進入優(yōu)惠券頁面，選擇后返回到下單頁，數(shù)據(jù)會綁定回來，顯示已選擇的優(yōu)惠券
登錄狀態(tài)等

Vuex的屬性

state
- Vuex就是一個倉庫，倉庫里面放了很多對象，其中state就是數(shù)據(jù)源存放地，對應一般Vue對象里面的data
- state里面存放的數(shù)據(jù)是響應式的，Vue組件從store中讀取數(shù)據(jù)，若是store中的數(shù)據(jù)發(fā)生改變，依賴這個數(shù)據(jù)的組件也會發(fā)生更新
- 通過mapState把全局的state和getters映射到當前組件的computed計算屬性中
getters
- getters可以對state進行計算操作，它就是store的計算屬性
- 雖然在組件內(nèi)也可以做計算屬性，但是getters可以在多組件之間復用
- 如果一個狀態(tài)只在一個組件內(nèi)使用，可以不用getters

Mutations

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

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

不能直接調(diào)用一個mutation handler。這個選項更像是事件注冊，當觸發(fā)一個類型為increment的mutations時，調(diào)用此函數(shù)。要喚醒一個mutation handler，需要調(diào)用相應的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ù)情況下，載荷應該是一個對象，這安樣可以包含多個字段并且記錄的mutation會更易讀

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

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

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

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

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

當需要在對象上添加新屬性時，應該

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

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

以新對象替換老對象。例如，利用對象展開運算符

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同樣支持載荷方式和對象方式進行分發(fā)

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

action提交的是mutation，而不是直接變更狀態(tài)
action可以包含任意異步操作

module

module可以讓每個模塊擁有自己的state、mutations、action、getters使得結構非常清晰，方便管理

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

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

使用Vuex的好處