vuex 源码分析_深入Vuex原理（上）

原标题：深入Vuex原理(上)

孔维国，2016年加入去哪儿网技术团队。目前在大住宿事业部/增值业务研发中心，参与开发了TMC、CRM、QTA、Auth等项目，负责node框架nomi的设计以及开发。乐于探索布道新技术，在大前端的道路上越走越偏！在node领域上越陷越深！

前言

Vuex 作为 Vue 生态的重要组成部分，是对 store 进行管理的一柄利剑。简而言之，Vuex 是 Vue 的状态管理器。使用 Vuex 可用使数据流变得清晰、可追踪、可预测，更可以简单的实现类似时光穿梭等高级功能，对于复杂的大型应用来讲，Vuex 将变得尤为重要，对于 store 的切分、store 的 module 化、store 的变更、store 的追踪等等，store 的管理工作，使用 Vuex 管理 store 会大大提高项目的稳定性、扩展性。本篇将通过 Vuex 的源码对 Vuex 的设计以及实现原理进行剖析！

注：本篇文章只展示关键核心代码，一来由于篇幅原因，二来展示核心代码更容易让人理解。再者，本篇属于 Vuex 高级篇，对于本篇章中涉及的 Vue 相关的机制 以及 Vuex的高级使用等，不进行过多赘述，请自行前往官网查看。

准备浅析Vuex的构成

Vuex 引入 State、Getter 的概念对状态进行定义；使用 Mutation 和 Action 对状态进行变更；引入 Module 对状态进行模块化分割；引入插件对状态进行快照、记录、以及追踪等；提供了 mapState、mapGetters、 mapActions、 mapMutations 辅助函数方便开发者在 vm 中处理 store。具体构成关系如下：

浅析Vuex的使用

Vuex 的使用方式很简单，具体使用细节请参见 Vuex 官网，本文为了剖析源码方便，只进行简单介绍。我们只需要利用 Vue 的 use 机制将 实例化后的 store 对象 注入 Vue 实例即可。如下图：

核心代码如下：

Vue.use(Vuex); // 1. vue的插件机制，安装vuex

let store = new Vuex.Store({ // 2.实例化store，调用install方法

state,

getters,

modules,

mutations,

actions,

plugins

});

new Vue({ // 3.注入store, 挂载vue实例

store,

render: h=>h(app)

}).$mount('#app');

对Vuex的疑问

我们在使用 Vuex 对 store 进行管理的同时，不禁会问： (1)Vuex 的 store 是如何注入到组件中的？ (2)Vuex 的 state 和 getter 是如何映射到各个组件实例中自动更新的？ 本篇章旨在解决以上疑问，让我们一起深入 Vuex 的原理，揭开 Vuex 的神秘面纱吧！

探秘原理

本部分将针对以上疑问，通过源码分析，剖析核心代码，对问题进行解答。

疑问：Vuex的store是如何注入到组件中的？

要解答这个问题，我们先从 Vuex 的使用表象上着手，从上面的介绍我们知道，使用 Vuex 之前我们要对 Vuex 进行安装。核心代码如下：

Vue.use(Vuex); // vue的插件机制,安装vuex插件

源码分析

上面的代码得益于 Vue 的插件机制，会在调用 Vuex 的 install 方法时，装载 Vuex。所以我们直接关注 install 方法的实现，其核心代码如下：

Vue.mixin({ beforeCreate: vuexInit });

可见，store 注入 Vue 的实例组件的方式，是通过 Vue 的 mixin 机制，借助 Vue 组件的生命周期钩子 beforeCreate 完成的。即每个 Vue 组件实例化过程中，会在 beforeCreate 钩子前调用 vuexInit 方法。下面，我们将焦点聚焦在 vuexInit 函数。下面为 vuexInit 的核心代码：

this.$store = typeof options.store === 'function'

? options.store()

: options.store

该代码的核心问题是 this 的指向，得益于 mixin 机制，this 将指向 Vue 组件实例。最终，我们可以在 Vue 组件实例上获得 Vuex 的 store 对象的引用 $store。图示如下：

分析至此，我们已经得出该问题的答案。

结论

Vuex 利用了 Vue 的 mixin 机制，混合 beforeCreate 钩子，将 store 注入至 Vue 组件实例上，并注册了 Vuex store 的引用属性 $store。 对于其余问题的解答，请前往深入Vuex原理(下)。返回搜狐，查看更多

责任编辑：