Vuex使用详解

一、Vuex概述

引用官方文档的话解释什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

设想每个Vue组件都只需要关心自己的数据和数据处理逻辑，组件之间完全独立，没有共享数据的需求，那么web应用会非常简单。

但是实际情况是，一个web应用中不同组件常常会有数据共享的需求。例如文档类型的应用，编辑的内容和大纲之间要共享数据，大纲列表组件需要根据编辑的内容生成文档大纲、电商类型的应用，商品展示列表需要根据用户选择的分类展示相应的商品，那么商品列表组件需要知道分类选项组件中用户选择的是哪个类别。

我们知道Vue父组件可以和子组件之间通过props、事件、ref引用来进行通信，但是这种组件之间的通信方式在规模较大的应用中会有些力不从心。因此我们更倾向于将不同组件通用的数据提取出来统一管理。

我们知道Vue组件根据数据渲染视图，不同的数据对应不同的视图。我们也可以理解为web应用处于不同的“状态”，每个状态对应数据的一组取值。因此我们将数据抽出来统一管理也可以称为“状态管理”。

总之，Vuex就是专为Vue.js开发的状态管理工具，用于解决组件之间数据共享的需求。

状态管理工具都需要包含哪些要素？

1. 初始状态
2. 改变状态
3. 监听状态的改变

首先我们看下Vuex都有哪些API，然后说明这些API的作用。

1. state
2. getters
3. mutations
4. actions
5. module
6. 辅助函数：mapState、mapGetters、mapMutations、mapActions
7. createStore

其中state和getters用来保存状态；mutations和actions用来改变状态；监听状态用的是Vue组件中的computed属性；module是用来组织整个应用的状态管理代码，使状态划分模块，更易于管理；辅助函数用来在监听状态时候简化代码，createStore则用来创建状态管理对象。

Vuex状态管理就是创建一个对象（store），这个对象上面保存了应用中大部分数据，组件可以通过store获取数据，也可以改变数据的值。上面说的这些能力一个普通的js对象也可以做到。store和普通的对象的区别是：

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用

Vuex的数据流是组件中触发Action，Action提交Mutations，Mutations修改State。 组件根据 States或Getters来渲染页面。

参考官网的图示Vuex官网。

二、Vuex基本使用

【前端面试刷题网站：灵题库，收集大厂面试真题，相关知识点详细解析。】

注意这里使用Vuex版本为4

---

基本使用

首先我们来使用Vuex中的createStore方法创建一个store，我们注意到创建store的对象中目前有state和mutations两个属性。state中保存着我们需要使用的数据 count，mutations里面是改变state中数据的方法，方法接受一个state参数，通过改变这个state参数的属性（count）的值就可以修改状态了。

执行了store.commit(‘increase’);之后，Vuex会执行mutations中的increase方法，让count加一。

---

import {createStore} from 'vuex';

const store = createStore({
    state: {
        count: 0
    },
    mutations: {
        increase(state) {
            state.count++;
        }
    }
});
store.commit('increase');

console.log(store.state.count); // 1

---

mutations还可以接收参数

import {createStore} from 'vuex';

const store = createStore({
    state: {
        count: 0
    },
    mutations: {
        increase(state, {count}) {
            state.count = count;
        }
    }
});
store.commit('increase', {count: 2});

console.log(store.state.count); // 2

---

getters

getters和state的关系类似于Vue组件data属性和computed属性的关系，getters根据state或者其他getters计算出另一个变量的值，当其依赖的数据变化时候，它也会实时更新。

import {createStore} from 'vuex';

const store = createStore({
    state: {
        count: 0
    },
    getters: {
        msg(state) {
            return state.count % 2 === 0 ? '偶数': '奇数';
        }
    },
    mutations: {
        increase(state) {
            state.count++;
        }
    }
});
store.commit('increase');

console.log(store.state.count, store.getters.msg); // 1 "奇数"

actions

---

既然已经有了mutations可以改变state，为什么还需要actions呢？因为mutations不应该用于异步修改状态。实际上mutations是可以异步修改状态的，比如：

mutations: {
    increase(state) {
      	setTimeout(() => {
        	state.count++;
        }, 1000);
    }
}

但是这样做的话，Vuex是无法知道修改state.count的时机的，因为它是在异步回调里面指定的，因此Vuex无法在调试工具中打印出我们实际改变state的操作。

因此Vuex中有actions API，在actions中可以进行异步操作，在actions中可以提交mutations，也可以触发其他的action。

import {createStore} from 'vuex';

const store = createStore({
    state: {
        count: 0
    },
    mutations: {
        increase(state) {
            state.count++;
        }
    },
    actions: {
        increase(context) {
            setTimeout(() => {
              	// contex.dispatch可以用于触发其他action
                context.commit('increase');
            }, 1000);
        }
    }
});

store.dispatch('increase');

console.log(store.state.count); // 0

setTimeout(() => {
    console.log(store.state.count); // 1
}, 1000);

三、Vuex modules

通常在一个web应用中，会有很多数据，都放在一个store里面会让数据很混乱，因此我们应该根据功能模块将数据划分成一个一个的模块。

Vuex支持将store划分成模块，并且模块还可以嵌套。

下面看官方文档上的多个模块的示例：

在调用createStore时候传入的对象中，提供modules属性，传入两个子模块。

import {createStore} from 'vuex';
const moduleA = {
    state: {
        name: 'a'
    }
};

const moduleB = {
    state: {
        name: 'b'
    }
};

const store = createStore({
    modules: {
        a: moduleA,
        b: moduleB
    }
});

console.log(store.state.a.name); // a
console.log(store.state.b.name); // b

看下包含嵌套子模块时候，访问子模块的getters和state的示例，

下面的示例中，有两个子模块a和b，其中a中还有嵌套的子模块c，

（注意默认情况下，所有子模块的getters、mutations和actions都是注册在全局的）

import {createStore} from 'vuex';

const store = createStore({
    state: {
        counter: 0
    },
    getters: {
        counter10t