Vue Vuex狀態(tài)管理

1.1 理解 `Vuex`

1.1.1 `Vuex` 是什么

概念：專門在 Vue 中實(shí)現(xiàn)集中式狀態(tài)（數(shù)據(jù)）管理的一個(gè) Vue 插件务唐，對 Vue 應(yīng)用中多個(gè)組件的共享狀態(tài)進(jìn)行集中式的管理（讀/寫），也是一種組件間通信的方式龙屉，且適用于任意組件間通信。
Github地址

1.1.2 什么時(shí)候使用 `Vuex`

多個(gè)組件依賴于同一狀態(tài)
來自不同組件的行為需要變更同一狀態(tài)

1.1.3 `Vuex` 工作原理圖

flow.png

vuex.png

1.2 搭建 `Vuex` 環(huán)境與基本使用

1.2.1 環(huán)境 `Vuex` 搭建

創(chuàng)建文件：src/store/index.js

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

//準(zhǔn)備actions對象——響應(yīng)組件中用戶的動(dòng)作
const actions = {}
//準(zhǔn)備mutations對象——修改state中的數(shù)據(jù)
const mutations = {}
//準(zhǔn)備state對象——保存具體的數(shù)據(jù)
const state = {}

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

在 main.js 中創(chuàng)建 vm 時(shí)傳入 store 配置項(xiàng)

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

1.2.2 基本使用

初始化數(shù)據(jù)疗认、配置 actions炼列、配置 mutations，操作文件 store.js

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

const actions = {
    //響應(yīng)組件中加的動(dòng)作
    jia(context,value){
        // console.log('actions中的jia被調(diào)用了',miniStore,value)
        context.commit('JIA',value)
    },
}

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

//初始化數(shù)據(jù)
const state = {
    sum:0
}

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

組件中讀取 Vuex 中的數(shù)據(jù)：$store.state.sum
組件中修改 Vuex 中的數(shù)據(jù)：$store.dispatch('action中的方法名',數(shù)據(jù)) 或 $store.commit('mutations中的方法名',數(shù)據(jù))

備注：若沒有網(wǎng)絡(luò)請求或其他業(yè)務(wù)邏輯突倍，組件中也可以越過 actions，即不寫 dispatch盆昙，直接編寫 commit

1.3 `Vuex` 核心概念和API

1.3.1 `state`

Vuex 管理的狀態(tài)對象
它應(yīng)該是唯一的
示例代碼：
```
const state = {
    sum:0
}
```

1.3.2 `actions`

值為一個(gè)對象羽历，包含多個(gè)響應(yīng)用戶動(dòng)作的回調(diào)函數(shù)
通過 commit() 來觸發(fā) mutation 中函數(shù)的調(diào)用，間接更新 state
如何觸發(fā) actions 中的回調(diào)淡喜？

在組件中使用：$store.dispatch('對應(yīng)的action回調(diào)名') 觸發(fā)
可以包含異步代碼（定時(shí)器,ajax等等）

示例代碼：

const actions = {
    //響應(yīng)組件中加的動(dòng)作
    jia(context,value){
        // console.log('actions中的jia被調(diào)用了',miniStore,value)
        context.commit('JIA',value)
    },
}

1.3.3 `mutations`

值是一個(gè)對象秕磷，包含多個(gè)直接更新 state 的方法
誰能調(diào)用 mutations 中的方法？如何調(diào)用炼团？

在 action 中使用： commit('對應(yīng)的mutations方法名') 觸發(fā)
mutations 中方法的特點(diǎn)：不能寫異步代碼澎嚣、只能單純的操作 state

示例代碼：

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

1.3.4 `getters`

概念：當(dāng) state 中的數(shù)據(jù)需要經(jīng)過加工后再使用時(shí)，可以使用 getters 加工瘟芝。

在 store.js 中追加 getters 配置

// 準(zhǔn)備 getters —— 用于對 state 中的數(shù)據(jù)進(jìn)行加工
const getters = {
 bigSum(state){
     return state.sum * 10
 }
}

// 創(chuàng)建并暴露store
export default new Vuex.Store({
 ......
 getters
})

組件中讀取數(shù)據(jù)：$store.getters.bigSum

1.4 四個(gè) `map` 方法的使用

1.4.1 `mapState` 方法

mapState 方法：用于幫助我們映射 state 中的數(shù)據(jù)為計(jì)算屬性

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

    //借助mapState生成計(jì)算屬性：sum锌俱、school晤郑、subject（數(shù)組寫法）
    ...mapState(['sum','school','subject']),
},

1.4.2 `mapGetters` 方法

mapGetters 方法：用于幫助我們映射 getters 中的數(shù)據(jù)為計(jì)算屬性

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

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

1.4.3 `mapActions` 方法

mapActions 方法：用于幫助我們生成與 actions 對話的方法，即：包含 $store.dispatch(xxx) 的函數(shù)

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

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

1.4.4 `mapMutations` 方法

mapMutations 方法：用于幫助我們生成與 mutations 對話的方法磕洪，即：包含 $store.commit(xxx) 的函數(shù)

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

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

備注：mapActions 與 mapMutations 使用時(shí)，若需要傳遞參數(shù)需要：在模板中綁定事件時(shí)傳遞好參數(shù)线脚，否則參數(shù)是事件對象赐稽。

1.5 模塊化+命名空間

業(yè)務(wù)場景中需要包含多個(gè) module，一個(gè) module 是一個(gè) store 的配置對象浑侥，與一個(gè)組件（包含有共享數(shù)據(jù)）對應(yīng)
目的：讓代碼更好維護(hù)姊舵，讓多種數(shù)據(jù)分類更加明確

進(jìn)行模塊化：

修改 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
    }
})

開啟命名空間后，組件中讀取 state 數(shù)據(jù)

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

開啟命名空間后括丁，組件中讀取 getters 數(shù)據(jù)

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

開啟命名空間后伶选，組件中調(diào)用 dispatch

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

開啟命名空間后史飞，組件中調(diào)用 commit

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

Vue Vuex狀態(tài)管理

1.1 理解 Vuex

1.1.1 Vuex 是什么

1.1.2 什么時(shí)候使用 Vuex

1.1.3 Vuex 工作原理圖

1.2 搭建 Vuex 環(huán)境與基本使用

1.2.1 環(huán)境 Vuex 搭建

1.2.2 基本使用

1.3 Vuex 核心概念和API

1.3.1 state

1.3.2 actions

1.3.3 mutations

1.3.4 getters

1.4 四個(gè) map 方法的使用

1.4.1 mapState 方法

1.4.2 mapGetters 方法

1.4.3 mapActions 方法

1.4.4 mapMutations 方法