【Vue】學習筆記十：Vuex——狀態管理工具

---

Vuex

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension ，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

狀態管理是什麼？

狀態管理模式、集中式存儲管理管理這些名詞聽起來很高大上，讓人捉摸不透，其實可以簡單將其看成需要把多個組件共享的變量存儲在一個對象裏面，然後將這個對象放在頂層vue實例中，讓其他組件可以使用。

管理什麼狀態

• 登陸狀態、用戶名、頭像等基本信息
• 在商城類的網站常保存收藏內容，購物車中的商品等
• 需要在vue多個組件使用的值

先看一看定義的vuex基本結構

import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuew.store({
  state:{
  },
  mutations:{
  },
  actions:{
  },
  getters:{
  },
  modules:{
  }
});

官方流程圖

通過圖可以知道, 視圖層(view)是依賴Actions的, 通過Actions可以修改state中的屬性。

詳細過程如下圖。

詳細流程：

1. view層通過dispatch函數調用actions層的方法
2. actions層的方法執行，並進行簡單業務邏輯處理，然後通過commit調用mutations層的方法
3. mutations層的方法執行，並對state中的數據進行修改，此操作的每一步會被devtools記錄，方便以後調試
4. state中的數據修改完成，watcher響應並通知視圖層數據更新
5. view層進行渲染

使用

actions中的方法

	//context爲上下文, 即指的是當前store, 不同的modules的context不同
    addCartGoods(context,payload){
            //todo
    },

mutations中的方法

    addGoodsCount(state,payload){
        payload.count++;
    },

getters中的方法–與vue component中的computed屬性一般寫法相同

    getterMethod(state){
        return state.xxx;
    }

視圖層提交actions（即在vue component中）

    this.$store.dispatch('actionMethod', payload);//payload爲所傳遞的數據

actions層調用mutations層方法

    // 方式1
    context.commit('mutationMethod',payload);
    
    //方式2
    context.commit({
        type:'mutationMethod',
        data:payload
    })

在state中添加和刪除響應式變量/對象

//添加
Vue.set(state.對象, key, value);

//刪除
Vue.delete(state.對象, key);

在vue響應式系統中添加對象都是通過此方法。

在module中使用

//module中actions的方法, context多了一個可選的rootState
mudoleActionsMethods(context,payload){
       
},
//解構寫法
mudoleActionsMethods({state,commit,rootstate},payload){
       
},

//module中的mutations與之前的寫的發相同

//module中 getters 的寫法
getterMethodA(state[, getters][, rootstate]){
    //todo
    return xxx;
}

state會以模塊名稱掛載到$store.state的各個部分下。

//訪問某個模塊中的state數據
this.$store.state.模塊名稱.data

默認情況下(namespaced=true)，模塊內部的 action、mutation 和 getter 是註冊在全局命名空間, 這樣使得多個模塊能夠對同一 mutation 或 action 作出響應。即模塊中的getter/actions/mutations中的方法能像頂層對象中的gettter/actions/mutations那樣使用。感興趣訪問官方vuex modul。

getters、actions的映射

將vuex中的getters和actions與vue component中的computed和motheds映射。

//導入
import {mapGetters, mapActions} from 'vuex'

//vue component中
methods:{
    ...mapActions([
        'actionMethodA',
        'actionMethodB',
        ...
    ]),
},
computed:{
    ...mapGetters([
        'getterMethodA',
        'getterMethodB',
        'getterMethodC',
        ...
    ]),
}

Q&A 請指正！