前言

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

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

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

为什么要有install函数

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

使用use

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

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

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

如何判断Vuex是否安装?

先解决两个小问题

_Vue是什么？

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

为什么声明Vue变量？

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

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

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

就会有一个提示。

引发想法

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

先注册后实例化：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函数做了什么

上代码

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

我没有使用过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 }}

总结

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