vuex生命周期详解，揭秘vuex.use背后的故事

2023-11-17 04:51:32

在Vue中，vuex.use()是一个非常重要的函数，它使得我们可以使用vuex。那么，vuex.use()到底做了什么呢？

vuex.use()实际上调用了vuex.install()函数。vuex.install()函数做了以下几件事：

创建了一个vuex实例。
将vuex实例添加到Vue的原型上。
注册了vuex的mixin。
注册了vuex的mapState、mapActions、mapGetters和mapMutations。

下面我们来详细看一下vuex.install()函数的实现：

export function install (_Vue) {
  if (Vue && _Vue === Vue) {
    {
      warn(
        'already installed. Vue.use(Vuex) should be called only once.'
      )
    }
    return
  }
  Vue = _Vue
  applyMixin(Vue)
}

首先，vuex.install()函数会检查Vue是否存在，如果Vue存在并且等于_Vue，则说明vuex已经安装过了，因此会发出警告并返回。

如果Vue不存在或者Vue不等于_Vue，则说明vuex还没有安装，因此会执行以下操作：

将Vue赋值给Vue。
调用applyMixin(Vue)函数注册vuex的mixin。

applyMixin(Vue)函数的实现如下：

export function applyMixin (Vue) {
  // install store injection
  Vue.mixin({
    beforeCreate: vuexInit
  })
}

applyMixin(Vue)函数会注册一个mixin，这个mixin会在组件的beforeCreate钩子函数中调用vuexInit函数。vuexInit函数的实现如下：

export function vuexInit () {
  const options = this.$options
  if (options.store) {
    this.$store = typeof options.store === 'function'
      ? options.store()
      : options.store
  } else if (options.parent && options.parent.$store) {
    this.$store = options.parent.$store
  }
}