用最简的方式学Vuex

茶已备好，只待君来！感谢关注 前端点线面 (>‿<），本号定期推荐原创深度好文，帮助每一位在前端领域打拼的伙伴们走向前列，此外关注我获取最前沿知识点、海量学习资料、《前端百题斩》、大量思维导图，并进前端划水交流群。

一、基础

Vuex是一个专为Vue.js应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，每一个Vuex应用的核心是store（仓库）。为了使用Vuex，首先需要安装该包，执行如下命令完成该安装过程。

npm install vuex@next --save

二、核心概念

Vuex中核心概念主要有五个：State、Getters、Mutations、Actions、Modules，每一部分都有自己的功用，下面先来看一段简单的代码，该代码中涉及到了这些核心概念，然后在该代码的基础上进一步理解。

// index.js文件
import {createStore} from "vuex";

import {moduleA} from "./module/moduleA";

export const store = createStore({
    // Vuex允许将store分割成模块（module），每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块
    // 访问moduleA的状态：store.state.moduleA
    modules: {
        moduleA
    }
});

// module/moduleA.js文件
// 对于模块内部的mutation和getter，接收的第一个参数是模块的局部状态对象
// 对于模块内部的action，局部状态通过context.state暴露出来，根节点状态则为context.rootState
// 对于模块内部的getter，根节点状态会作为第三个参数暴露出来

// 在带命名空间的模块内访问全局内容
// 如果希望使用全局state和getter，rootState和rootGetters会作为第三和第四个参数传入getter，也会通过context对象的属性传入action
// 若需要在全局命名空间内分发action或提交mutation，将{root: true}作为第三个参数传给dispatch或commit即可。

export const moduleA = {
    // 默认情况下，模块内部的action、mutation和getter是注册在全局命名空间的，如果希望模块具有更高的封装度和复用性，可以通过添加namespaced:true的方式使其成为带命名空间的模块
    namespaced: true,
    state: {
        testState1: 'xxxx',
        testState2: {
            a: 0,
            b: 1
        },
        testState3: 0
    },
    // 有的时候需要从store中的state中派生出一些状态，此时可以将该部分抽象出一个函数供多处使用。
    // Vuex允许在store中定义getter，像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当他的依赖值发生了改变才会被重新计算
    getters: {
        // getter接收state作为其第一个参数
        testGetter1: state => {
            return state.testState1 + state.testState3;
        },
        // getter可以接受其他getter作为第二个参数
        testGetter2: (state, getters) => {
            return getters.testGetter1.length;
        }
    },
    // 更改Vuex的store中的状态的唯一方法是提交mutation，每个mutation都有一个字符串的事件类型和一个回调函数，该回调函数接收state作为第一个参数，提交的载荷作为第二个参数
    // 以相应的type调用store.commit方法来触发相应的回调函数
    // Mutation必须是同步函数
    mutations: {
        testMutation1(state) {
            // 变更状态
            state.testState3++;
        },
        // 第二个参数是载荷
        testMutation2(state, payload) {
            state.testState1 += payload.content;
        }
    },
    // Action提交的是mutation，而不是直接变更状态
    // Action可以包含任意异步操作
    // Action函数接受一个与store实例具有相同方法和属性的context对象，因此可以调用context.commit提交一个mutation，或者通过context.state和context.getters来获取state和getters。
    // Action通过store.dispatch方法触发
    actions: {
        testAction1(context) {
            setTimeout(() => {
                context.commit('testMutation1');
            }, 1000);
        },
        testAction2({commit}, payload) {
            setTimeout(() => {
                commit({
                    type: 'testMutation2',
                    content: payload.content
                });
            }, 1000);
        }
    }
};

1. State

Vuex使用单一状态树保存所有数据，作为唯一数据来源。如上所示代码，其包含了testState1、testState2、testState3，在组件中如何获取这些数据呢？（Vue3.x语法）

1. Getters

有的时候需要从store中的state中派生出一些状态，此时可以将该部分抽象出一个函数供多处使用。Vuex允许在store中定义getter，像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当他的依赖值发生了改变才会被重新计算。

1. Mutations

更改Vuex的store中的状态的唯一方法是提交mutation，每个mutation都有一个字符串的事件类型和一个回调函数，该回调函数接收state作为第一个参数，提交的载荷作为第二个参数。（注意：Mutation必须是同步函数）

1. Actions

Actions类似于mutation，但是仍然有一些不同点，一方面其提交的是mutation，而不是直接变更状态；另一方面Action可以包含任意异步操作。

1. Modules

由于使用单一状态树，应用的所有状态都会集中到一个较大的对象，当应用变的复杂时store会变的很难维护，为了解决该问题，Vuex允许将store分割成模块（module），每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块，具体使用可见第二节中开头部分的代码，其中包含了其常见的使用方式。

三、插件

3.1 插件基础

Vuex在实例化store的时候可以接受plugins选项，该选项可以添加一系列的插件，插件就可以帮助我们完成一系列的工作，节省人力和物力，下面我们自定义一个简单的插件并调用该插件。

// plugins/myPlugin.js
// 插件接收唯一的参数store
const myPlugin = store => {
    // store上有一系列的方法，可以用在插件中https://next.vuex.vuejs.org/zh/api/#commit
    // 注册一个动态模块用registerModule
    // 替换store的根状态用replaceState
    // 监听mutation的变化，该处理函数会在每个mutation完成后调用，接收mutation和经过mutation后的状态作为参数
    store.subscribe((mutation, state) => {
        console.log(mutation);
    });
};

export default myPlugin;

// index.js
import {createStore} from "vuex";
import myPlugin from "./plugins/myPlugin";

export const store = createStore({
    // ……
    // 一个数组，包含应用在store上的插件方法，这些插件直接接收store作为唯一参数，可以监听mutation或者提交mutation
    plugins: [myPlugin]
});

3.2 数据持久化插件

Vuex的状态存储并不能持久化，只要一刷新页面数据就丢失了，此时可引入vuex-persist插件来解决该问题，其会将状态保存至cookie或者localStorage中。

import {createStore} from "vuex";
import VuexPersistence from "vuex-persist";
import myPlugin from "./plugins/myPlugin";

// 利用该插件可实现对store数据的持久化
const vuexLocal = new VuexPersistence({
    storage: window.localStorage
});

export const store = createStore({
    // ……
    // 一个数组，包含应用在store上的插件方法，这些插件直接接收store作为唯一参数，可以监听mutation或者提交mutation
    plugins: [myPlugin, vuexLocal.plugin]
});

················ 执鸢者简介 ·················

大家好，我是执鸢者，毕业于华中科技大学，新时代农民工，现在是百度前端研发工程师，著有《前端百题斩》、数十篇学习思维导图（go、React、Redux、Vue、Vuex、操作系统、Linux、设计模式、js、webpack、nginx）以及大量前端进阶文章，大量同学已通过号主的系列内容获取心仪的offer，关注我获取海量资料、交流工作心得并进卧虎藏龙交流群。

识别上方二维码加我微信、拉你进交流群

[1] 五万字前端面试宝典

[2] 纯CSS实现beautiful按钮

[3] 一张思维导图入门React

[4] 一文搞定Diff算法

[5] 16张图入门Nginx

[6] 好记性不如烂笔头——Vue3.0篇

[7] 好记性不如烂笔头——Vuex篇

[8] 好记性不如烂笔头——Linux篇

[9]好记性不如烂笔头——React篇

[10] 好记性不如烂笔头——Redux篇