Vuex源码学习(三)install都做了哪些事情

发布时间:2019-05-17 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Vuex源码学习(三)install都做了哪些事情脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

各位看官 没看过脉络梳理的可以先阅读下
Vuex源码学习(二)脉络梳理.

为什么要有install函数

Vue插件如何被注册到Vue上呢?
使用use

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

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

Vuex源码学习(三)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源码学习(三)install都做了哪些事情

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

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

上代码

Vuex源码学习(三)install都做了哪些事情


核心 -> 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实例化的对象。

Vuex源码学习(三)install都做了哪些事情

下一章讲述ModuleCollection类做了什么

Vuex源码学习(三)install都做了哪些事情

脚本宝典总结

以上是脚本宝典为你收集整理的Vuex源码学习(三)install都做了哪些事情全部内容,希望文章能够帮你解决Vuex源码学习(三)install都做了哪些事情所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。