深刻vuex原理(上)

前言

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进行管理的同时，不由会问：

• vuex的store是如何注入到组件中的？
• 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原理(下)