Vuex 2.0 学习笔记（一）：框架原理

Vuex 是一个专为 Vue 服务，用于管理页面数据状态、提供统一数据操作的生态系统。它专注于 MVC 模式中的 Model 层，规定所有数据必需遵循action -> mutation -> state(change)的流程来进行（在不需要异步操作并且交互逻辑比较简单的时候，也可以直接通过commit触发mutation来完成mutation -> state(change)的操作），再结合 Vue 的数据视图双向绑定特性来实现页面的展示更新。统一的页面状态管理以及操作处理，可以让复杂的组件交互变得简单清晰，同时可在调试模式下进行时光机般的倒退前进操作，查看数据改变过程，使 code debug 更加方便。

由于在前段时间的毕业设计中使用过 Vuex 来管理整个后台系统的页面状态，也遇到了很多的坑，加上最近要进行一个关于 Vuex 的技术分享，就决定参考美团点评技术团队的相关博客，通过完整阅读源码来深入学习一下 Vuex 的实现原理。

Vuex 学习笔记将通过框架原理、源码阅读、总结和应用三个章节来分享这次的学习心得。

注：第一章主要是对框架原理的介绍，并且通过一些代码来简单地描述在项目中应该如何使用 Vuex 来对页面进行状态管理，真正遇到的项目可能会比这一章介绍的东西复杂得多。因此如果觉得我在这一章有什么没有讲清楚或者是有什么错误，都欢迎提出来，也可以参考 Vuex 官方文档进行基础概念的学习。

1. 为什么要用Vuex ？

Vuex 的使用主要取决于我们的项目，官网的解释是：

• 当我们构建一个中大型的单页面应用程序时，Vuex 可以更好的帮助我们在组件外部统一管理状态。

举个例子，当我们在做一个基于 Vue 的商城项目时，顶部都会有一个 header 组件，它包含了我们登录之后的用户名、购物车商品数量，而这个项目里面的任何一个页面都会包含这个 header 组件，因此这个组件是被很多组件引用的。
为了方便我们在任何一个地方都能拿到这个组件里面的状态，我们就可以把这些状态放到 Vuex 里。而如果没有 Vuex 的话，我们会发现在组件间传参的时候需要不停地通过$emit进行传参，这种方式是十分麻烦的。组件比较少还好，一旦组件较多，需要一个状态被很多组件所使用的话，我们进行一次状态改变，就需要无数个$emit来完成全局状态的改变，很痛苦也很难管理状态。

Vuex 就可以把这些共用的状态提出来，放到 Vuex 里面，这样所有组件都可以获取到这个状态，可以想象成但并不等于window里面的全局变量。

2. 框架运行流程

对于 Vuex 框架，官方提供了一个相对完整的核心思想图，这代表着整个 Vuex 框架的运行流程。

Vuex 核心思想图

如图所示，Vuex 为 Vue Components 建立起了一个完整的生态圈，包括在实际项目中对 API 的调用。围绕这个生态圈，简要介绍一下各模块在核心流程中的主要功能：

• Vue Components：Vue 组件。HTML 页面上，负责接收用户操作等交互行为，执行 dispatch 方法触发对应 action 进行回应。
• dispatch：操作行为触发方法，是唯一能执行 action 的方法。
• actions：操作行为处理模块。负责处理 Vue Components 接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台 API 请求的操作就在这个模块中进行，包括触发其他 action 以及提交 mutation 的操作。该模块提供了 Promise 的封装，以支持 action 的链式触发。
• commit：状态改变提交操作方法。对 mutation 进行提交，是唯一能执行 mutation 的方法。
• mutations：状态改变操作方法。是 Vuex 修改 state 的唯一推荐方法，其他修改方式在严格模式下将会报错。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些 hook 暴露出来，以进行 state 的监控等。
• state：页面状态管理容器对象。集中存储 Vue components 中 data 对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用 Vue 的细粒度数据响应机制来进行高效的状态更新。
• getters：state 对象读取方法。图中没有单独列出该模块，应该被包含在了 render 中，Vue Components 通过该方法读取全局 state 对象。

核心流程：Vue 组件接收交互行为，调用 dispatch 方法触发 action 相关处理，若页面状态需要改变，则调用 commit 方法提交 mutation 修改 state，通过 getters 获取到 state 新值，重新渲染 Vue Components，界面随之更新。

3. 核心模块

在官方文档中，提出了五个核心模块：State、Getters、Mutations、Actions 和 Modules，而在一个使用 Vuex 的项目中，State 和 Mutations 是必需存在的。

3.1 State

什么是 State ？每一个组件的 data 中包含的变量都可以称为 State，它也是整个 Vue 的核心概念。Vue 使用 State 来管理和操作 DOM，从而改变页面的 UI，而不是像过去的那些方式（比如jQuery）一样直接去操作 DOM。关于 State 有两个重要的概念：

• State 是唯一的数据源。
• 单一的状态树。

const Counter = {
    templete: `<div>{{ count }}</div>`,
    computed: {
        count() {
            return this.$store.count
        }
    }
}

这段代码说明了，当我们把变量count放到 Vuex 里面以后，所有的组件都可以通过这种方式获取变量，然后把它渲染到模板里面去。如果你觉得这种方法比较 low（我也觉得），那么继续往下看。

3.2 Getters

Getters 并不是必需品，但是在一些特定的场景还需要它出马，在核心思想图上并没有标出它存在的位置，但是从它的使用方式来说，我觉得它被包含在了 State 和 Vue Components 之间的 Render 里面了。先看一下定义：

• 通过 Getters 可以派生出一些新的状态。

怎么理解？先来看一段代码：

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: '...' , done: true },
            { id: 2, text: '...' , done: false }
        ]
    },
    getters: {
        doneTodos: state => {
            return state.todos.filter(todo => todo.done)
        }
    }
})

我们先实例化了一个 Vuex，假设有很多组件都在使用 state 里的 todos 这个变量，而刚好有一个组件它只想获取数组里done属性的是true的对象，就可以用 getters 来对返回值进行处理。可能有人会说，那我把它拿到组件里再过滤不就行了吗？好像是这么个道理，但是如果有五个组件需要获取done属性的是true的对象，那我们不就得写五次的过滤方法了吗？因此，getters 也可以理解成是一个被提取出来的处理 state 对组件返回值的方法。

3.3 Mutations

提交 Mutations 是 Vuex 提供的唯一可以改变 State 的方法。看一下官方的话：

• 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

const store = new Vuex.Store({
    state: {
        count: 1
    },
    mutations: {
        increment(state) {
            state.count ++
        }
    }
})

我们通过上面的代码可以简单地定义一个 mutation ，但是还需要一个方法去触发它，这就要用到commit方法：

store.commit('increment')

commit可以放在组件里面来提交 mutation，也可以在 action 里面提交 mutation。

注意：mutation 只能是同步的，不支持异步，当我们需要使用异步的方法的时候，就需要使用 action 异步地来触发 mutation。

3.4 Actions

Action 的作用上面已经提到了，可以稍微总结一下：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含异步操作。

const store = new Vuex.Store({
    state: {
        count: 1
    },
    mutations: {
        increment(state) {
            state.count ++
        }
    },
    actions: {
        increment(context) {
            context.commit('increment')
        }
    }
})

实际上，Actions 的主要用处也就是封装一些可以异步触发 mutation 的方法，组件可以使用dispatch方法调用action，包括和 API 的通信。

3.5 Modules

最后，来了解一下 Modules，其实很容易理解，我们在写 js 代码的时候，经常会根据模块进行拆分，Modules 也是这个思想。在编写大型应用的时候，需要 Vuex 管理的状态比较多的时候，就需要把 Vuex 的 Store 对象分割成 module。

const moduleA = {
    state: { ... },
    mutations: { ... },
    actions: { ... },
    getters: { ... }
}

const moduleB = {
    state: { ... },
    mutations: { ... },
    actions: { ... },
    getters: { ... }
}

const store = new Vuex.Store({
    modules: {
        a: moduleA,
        b: moduleB
    }
})

一般情况下，不是很复杂的项目我觉得并不需要拆分，也不一定要按照官方给的文件目录来开发。只能说，按方抓药吧。

4. 总结

关于 Vuex 的基本原理差不多就是这些了，但是由于它的特点，光看基本原理会发现什么都不会，而且光看几个小 demo 也让人觉得它好像没啥用，因此，学习 Vuex 需要在具体的项目中运用到，才能对它有一定的理解。当然，读一读源码，知道它是怎么实现的也是很好的。

Vuex.store 源码实现逻辑

下一章：关于 Vuex 源码的解析，就是根据这张来自美团点评技术团队的 Vuex.store 源码实现逻辑图来进行的，有兴趣的小伙伴可以先自己把源码下下来根据流程看一看，文章大概周日更新。