【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，达到了预期效果