前言

这是一个长篇系列，欢迎大家关注持续阅读学习。这个系列的前俩篇文章，也欢迎阅读

长篇连载：Vuex源码学习（一）功能梳理

长篇连载：Vuex源码学习（二）脉络梳理

为什么要有install函数

在Vue插件如何被注册到Vue上呢？

使用use

// 正确的注册插件方式：
Vue.use(Vuex);
// 这里会执行Vuex的install方法。

我们来看一下install函数的代码

1. 这块一共做了两件事情：判断以下vuex插件是否已经完成安装了
2. 开始真正的vuex插件安装的具体逻辑

如何判断Vuex是否安装?

先解决两个小问题

_Vue是什么？

_Vue是注册插件时，被传递进来的Vue构造函数，

为什么声明Vue变量？

声明Vue这个变量的意义是在Vuex内部不引入Vue这个构造函数（Vue框架的代码），

而是等待Vue.use(Vuex)之后把外部引入的Vue对象传递进去。

给Vue对象的赋值操作只有在install函数内，所以Vue变量存在并且等于_Vue（这个外部传递进来的Vue构造函数）的话，代表Vuex已经完成了install，

就会有一个提示。

引发想法

注册Vuex插件与实例化Vuex.Store构造函数先后顺序

1. 先注册后实例化：

Vue.use(Vuex)
export default new Vuex.Store({
 state : {
 tryData : 'recruitment',
 },
 modules : {
 list : moduleList,
 set : moduleSet
 }
});
// 没有问题
export default new Vuex.Store({
 state : {
 tryData : 'recruitment',
 },
 modules : {
 list : moduleList,
 set : moduleSet
 }
});
Vue.use(Vuex)
//会报错

Vuex安装的时候具体做了什么？

安装做了什么就要去看applyMixin函数做了什么

上代码

1. 核心 -> vuexInit判断版本，Vue2.0以上使用生命周期，Vue1.0使用Vue.protoType.init
2. 完成挂载

我没有使用过Vue1.0版本，所以就对Vue2.0版本进行一个解释吧，

if (version >= 2) {
 // 2.0版本以上 通过mixin的方式在每个Vue对象的beforeCreate生命周期执行的时候完成vuex初始化
 Vue.mixin({ beforeCreate: vuexInit })
 } 
function vuexInit () {
 // 获取当前Vue对象的options
 const options = this.$options
 // store injection
 // 根结点对象的options上会被挂载store，在new Vue的时候做的
 if (options.store) {
 // 把根结点上的store传递给组件的$store属性上，访问的是同一个对象
 this.$store = typeof options.store === 'function'
 ? options.store()
 : options.store
 } else if (options.parent && options.parent.$store) {
 // 不是根结点，那么从这个节点的父节点上拿到$store传递给子节点
 // Vue这个组件树是从根结点向下一层一层的生成Vue对象的，所以根结点有根结点的儿子节点就会有$store属性，
 //同理这些节点的子节点也会有$store，
 //最后每一个Vue的实例对象都会有$store属性，
 //全部都指向同一个对象，就是那个被实例化的Vuex内的store对象。
 this.$store = options.parent.$store
 }
}

总结

1. install函数的意义？
2. Vuex注册的时候，必须要暴露出这个方法，供Vue使用。
3. install函数做了什么？
4. 判断Vuex是否已经注册，注册过就不再注册，
5. Vue2.0给每个Vue组件的beforeCreate生命周期中增加vuexInit函数，
6. 给每个Vue组件上挂载一个$store对象，全部都指向Vuex的Store实例化的对象。