【Vue課序3】保姆級：實現Vue + Vuex 的狀態管理

一、什麼是 Vuex

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

---

二、安裝 Vuex

通過npm安裝：

npm install vuex —save

通過yarn安裝：

yarn add vuex

---

三、用全局store來管理狀態

拿剛剛完成的HelloWorld.vue來體驗Vuex的狀態管理，步驟：
1.在src/下創建store.js，在vuex中我們需要保存的數據就在state中

this.$store.state // 在頁面組件的methods中，進行抓取store中的數據

import Vue from 'vue' // 引入 vue
import Vuex from 'vuex' // 引入vuex

// 使用Vuex
Vue.use(Vuex);

// 創建並導出Vuex實例
export default new Vuex.Store({
    
    state: {
        count:0 // 我們用 count來標記狀態
    }
});

2.修改main.js，將 store註冊到全局

import Vue from 'vue'
import App from './App'
import router from './router'
// 引入store樹
import store from './store.js'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    store, // 註冊到全局
    components: { App },
    template: '<App/>'
})

3.修改HelloWorld.vue中的<template>

<div class="hello">
    <p>組件內部的Total Count：{{this.count}}</p>
    <p>store的Total Count：{{this.$store.state.count}}</p>
    <button v-on:click.stop="add_Count()">Count++</button>
    <button v-on:click.stop="sub_Count()">Count--</button>
</div>

此時當我們點擊按鈕時，只有第一行的count計數器發生了變化，因爲全局的store沒有發生改變，如何實現組件內部的事件修改store的數據呢？下面我們來進行第四步
4.接着修改HelloWorld.vue，在methods增加兩個方法

// methods中增加兩個方法：
// 修改組件外部狀態
add_store_Count() {
    this.$store.commit("add");
},
sub_store_Count() {
    this.$store.commit("sub");
}

// template中增加兩個按鈕 來綁定新增的方法
<button v-on:click.stop="add_store_Count()">Store_Count++</button>
<button v-on:click.stop="sub_store_Count()">Store_Count--</button>

5.修改store.js的實例，mutations相當於redux中的reducer，都是用來修改store數據的。

// 創建並導出Vuex實例
export default new Vuex.Store({
    state: {
        count: 0
    },
    
    mutations: {
        add(state) {
            state.count++
        },
        sub(state) {
            state.count--
        }
    }
});

6.檢驗結果：所有按鈕都能對數據進行修改。

---

四、更好的管理狀態方案

我們看到，頁面上的值是改變了；我們達到了修改store中狀態值的目的，但是，官方並不建議我們這樣直接去修改store裏面的值，而是讓我們去提交一個actions，在actions中提交mutations再去修改狀態值，接下來我們修store.js文件，先定義actions提交mutations的函數

1.修改store.js文件

// 創建並導出Vuex實例
export default new Vuex.Store({
    state: {
        count: 0
    },
    
    mutations: {
        add(state) {
            state.count++
        },
        sub(state) {
            state.count--
        }
    },
    actions: {
        add_func(context) {
            context.commit('add'); // commit的參數指向mutations的方法
        },
        sub_func(context) {
            context.commit('sub');
        }
    }
});

2.修改組件中methods的方法

add_store_Count() {
    
   // this.$store.commit("add”);
   this.$store.dispatch("add_func"); // dispatch的參數指向action的方法
},
sub_store_Count() {
  this.$store.dispatch(“sub_func");  
}

3.檢驗結果。

---

五、如何攜帶參數

好了，以上我們已經實現了一個基本的vuex修改狀態值的完整流程，如果我們需要指定加減的數值，那麼我們直接傳入dispatch中的第二個參數，然後在actions中的對應函數中接受參數在傳遞給mutations中的函數進行計算：

1.修改methods中add_store_Count方法

add_store_Count() {
    let num = 10;
    this.$store.dispatch("add_func", num); // dispatch的參數指向action的方法，將num也攜帶過去
}

2.修改store.js，將參數以payload一直傳遞。

// 創建並導出Vuex實例
export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        add(state, payload) {
            state.count = state.count + payload;
        },
        sub(state) {
            state.count--
        }
    },
    actions: {
        add_func(context, payload) {
            context.commit('add', payload); // commit的參數指向mutations的方法
        },
        sub_func(context) {
            context.commit('sub');
        }
    }
});

3.檢驗結果，通過點擊按鈕發現值每次增加10，達到了預期效果