Vuex源码学习（三）install都做了哪些事情

各位看官 没看过功能梳理的可以先阅读下 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函数做了什么

上代码

核心 -> vuexInit

1. 判断版本，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函数的意义？

   Vuex注册的时候，必须要暴露出这个方法，供Vue使用。

2. install函数做了什么？

   判断Vuex是否已经注册，注册过就不再注册，

   Vue2.0给每个Vue组件的beforeCreate生命周期中增加vuexInit函数， 给每个Vue组件上挂载一个$store对象，全部都指向Vuex的Store实例化的对象。

下一章讲述ModuleCollection类做了什么

转载于:https://juejin.im/post/5c8b213af265da2da835bb3e