Vue Vuex狀态管理

Vue Vuex

1.1 了解 ​

​Vuex​

​

1.1.1 ​

​Vuex​

​ 是什麼

1. 概念：專門在 ​

   ​Vue​

   ​​ 中實作集中式狀态（資料）管理的一個 ​

   ​Vue​

   ​​ 插件，對 ​

   ​Vue​

   ​ 應用中多個元件的共享狀态進行集中式的管理（讀/寫），也是一種元件間通信的方式，且适用于任意元件間通信。
2. ​​Github位址​​

1.1.2 什麼時候使用 ​

​Vuex​

​

1. 多個元件依賴于同一狀态
2. 來自不同元件的行為需要變更同一狀态

1.1.3 ​

​Vuex​

​ 工作原理圖

1.2 搭建 ​

​Vuex​

​ 環境與基本使用

1.2.1 環境 ​

​Vuex​

​ 搭建

1. 建立檔案：​

   ​src/store/index.js​

   ​

//引入Vue核心庫
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//應用Vuex插件
Vue.use(Vuex)

//準備actions對象——響應元件中使用者的動作
const actions = {}
//準備mutations對象——修改state中的資料
const mutations = {}
//準備state對象——儲存具體的資料
const state = {}

//建立并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})      

1. 在 ​

   ​main.js​

   ​ 中建立 ​

   ​vm​

   ​ 時傳入 ​

   ​store​

   ​ 配置項

......
//引入store
import store from './store'
    ......
    //建立vm
    new Vue({
        el:'#app',
        render: h => h(App),
        store
    })      

1.2.2 基本使用

1. 初始化資料、配置 ​

   ​actions​

   ​、配置 ​

   ​mutations​

   ​，操作檔案 ​

   ​store.js​

   ​

//引入Vue核心庫
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)

const actions = {
    //響應元件中加的動作
    jia(context,value){
        // console.log('actions中的jia被調用了',miniStore,value)
        context.commit('JIA',value)
    },
}

const mutations = {
    //執行加
    JIA(state,value){
        // console.log('mutations中的JIA被調用了',state,value)
        state.sum += value
    }
}

//初始化資料
const state = {
    sum:0
}

//建立并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
})      

1. 元件中讀取 ​

   ​Vuex​

   ​ 中的資料：​

   ​$store.state.sum​

   ​
2. 元件中修改 ​

   ​Vuex​

   ​ 中的資料：​

   ​$store.dispatch('action中的方法名',資料)​

   ​ 或 ​

   ​$store.commit('mutations中的方法名',資料)​

   ​

備注：若沒有網絡請求或其他業務邏輯，元件中也可以越過 ​

​actions​

​​，即不寫 ​

​dispatch​

​​，直接編寫 ​

​commit​

​

1.3 ​

​Vuex​

​ 核心概念和API

1.3.1 ​

​state​

​

1. ​

   ​Vuex​

   ​ 管理的狀态對象
2. 它應該是唯一的
3. 示例代碼：

const state = {
    sum:0
}      

1.3.2 ​

​actions​

​

1. 值為一個對象，包含多個響應使用者動作的回調函數
2. 通過 ​

   ​commit()​

   ​ 來觸發 ​

   ​mutation​

   ​ 中函數的調用，間接更新 ​

   ​state​

   ​
3. 如何觸發 ​

   ​actions​

   ​ 中的回調？

   在元件中使用：​

   ​$store.dispatch('對應的action回調名') ​

   ​ 觸發
4. 可以包含異步代碼（定時器,ajax等等）
5. 示例代碼：

const actions = {
    //響應元件中加的動作
    jia(context,value){
        // console.log('actions中的jia被調用了',miniStore,value)
        context.commit('JIA',value)
    },
}      

1.3.3 ​

​mutations​

​

1. 值是一個對象，包含多個直接更新 ​

   ​state​

   ​ 的方法
2. 誰能調用 ​

   ​mutations​

   ​ 中的方法？如何調用？

   在 ​

   ​action​

   ​ 中使用： ​

   ​commit('對應的mutations方法名') ​

   ​ 觸發
3. ​

   ​mutations​

   ​​ 中方法的特點：不能寫異步代碼、隻能單純的操作 ​

   ​state​

   ​
4. 示例代碼：

const mutations = {
    //執行加
    JIA(state,value){
        // console.log('mutations中的JIA被調用了',state,value)
        state.sum += value
    }
}      

1.3.4 ​

​getters​

​

1. 概念：當 ​

   ​state​

   ​ 中的資料需要經過加工後再使用時，可以使用 ​

   ​getters​

   ​ 加工。
2. 在 ​

   ​store.js​

   ​ 中追加 ​

   ​getters​

   ​ 配置

// 準備 getters —— 用于對 state 中的資料進行加工
const getters = {
  bigSum(state){
    return state.sum * 10
  }
}

// 建立并暴露store
export default new Vuex.Store({
  ......
  getters
})      

1. 元件中讀取資料：​

   ​$store.getters.bigSum​

   ​

1.4 四個 ​

​map​

​ 方法的使用

1.4.1 ​

​mapState​

​ 方法

​

​mapState​

​ 方法：用于幫助我們映射 ​

​state​

​ 中的資料為計算屬性

computed: {
    //借助mapState生成計算屬性：sum、school、subject（對象寫法）
    ...mapState({sum:'sum',school:'school',subject:'subject'}),

    //借助mapState生成計算屬性：sum、school、subject（數組寫法）
    ...mapState(['sum','school','subject']),
},      

1.4.2 ​

​mapGetters​

​ 方法

​

​mapGetters​

​ 方法：用于幫助我們映射 ​

​getters​

​ 中的資料為計算屬性

computed: {
    //借助mapGetters生成計算屬性：bigSum（對象寫法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成計算屬性：bigSum（數組寫法）
    ...mapGetters(['bigSum'])
},      

1.4.3 ​

​mapActions​

​ 方法

​

​mapActions​

​ 方法：用于幫助我們生成與 ​

​actions​

​​ 對話的方法，即：包含 ​

​$store.dispatch(xxx)​

​ 的函數

methods:{
    //靠mapActions生成：incrementOdd、incrementWait（對象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（數組形式）
    ...mapActions(['jiaOdd','jiaWait'])
}      

1.4.4 ​

​mapMutations​

​ 方法

methods:{
    //靠mapActions生成：increment、decrement（對象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),

    //靠mapMutations生成：JIA、JIAN（對象形式）
    ...mapMutations(['JIA','JIAN']),
}      

1.5 子產品化+命名空間

1. 業務場景中需要包含多個 ​

   ​module​

   ​​，一個 ​

   ​module​

   ​​ 是一個 ​

   ​store​

   ​ 的配置對象，與一個元件（包含有共享資料）對應
2. 目的：讓代碼更好維護，讓多種資料分類更加明确

1. 修改 ​

   ​store.js​

   ​

const countAbout = {
    namespaced:true,//開啟命名空間
    state: {x: 1},
    mutations: { ... },
    actions: { ... },
    getters: {
        bigSum(state){
            return state.sum * 10
        }
    }
}
   
const personAbout = {
    namespaced:true,//開啟命名空間
    state:{ ... },
    mutations: { ... },
    actions: { ... }
}
   
const store = new Vuex.Store({
    modules: {
        countAbout,
        personAbout
    }
})      

1. 開啟命名空間後，元件中讀取 ​

   ​state​

   ​ 資料

//方式一：自己直接讀取
this.$store.state.personAbout.list
//方式二：借助mapState讀取：
...mapState('countAbout',['sum','school','subject']),      

1. 開啟命名空間後，元件中讀取 ​

   ​getters​

   ​ 資料

//方式一：自己直接讀取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters讀取：
...mapGetters('countAbout',['bigSum'])      

1. 開啟命名空間後，元件中調用 ​

   ​dispatch​

   ​

//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})      

1. 開啟命名空間後，元件中調用 ​

   ​commit​

   ​

//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),