Vuex安装

由于Vuex也属于Vue的插件，因此我们在使用Vuex的时候，需要使用Vue.use()方法进行注册。

在store.js中其代码如下：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

根据Vue插件机制原理，插件需要提供一个install方法，在Vuex源码中，install的代码路径为src/store.js，其实现代码如下：

import applyMixin from './mixin'

let Vue
export function install (_Vue) {
  if (Vue && _Vue === Vue) {
    if (__DEV__) {
      console.error(
        '[vuex] already installed. Vue.use(Vuex) should be called only once.'
      )
    }
    return
  }
  Vue = _Vue
  applyMixin(Vue)
}

在这个方法中，它所做的事情很简单，第一个就是把我们传递的Vue实例缓存起来，以方便后续实例化Store的时候使用。第二件事情就是调用applyMixin方法，此方法代码路径为src/mixin.js。

// mixin.js文件
export default function (Vue) {
  const version = Number(Vue.version.split('.')[0])
  if (version >= 2) {
    Vue.mixin({ beforeCreate: vuexInit })
  } else {
    // 省略Vue1.0+版本逻辑
  }
}

因为我们Vue源码分析是基于Vue2.6.11，因此我们省略关于else分支的逻辑。

当Vue的版本高于2.0时，它会调用Vue.mixin()方法全局混入一个beforeCreate生命周期，当beforeCreate生命周期执行的时候，会调用vuexInit，其代码如下：

// vuexInit中的this代表当前Vue实例
function vuexInit () {
  const options = this.$options
  // store injection
  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
  }
}

在入口main.js文件中，我们有这样一段代码：

// main.js
import store from './store'

new Vue({
  el: '#app',
  store
})

我们在vuexInit方法中拿到的options.store就是我们传入的store，我们再来把目光跳转到store.js文件中，其代码如下：

// store.js
import Vuex from 'vuex'

export default new Vuex.Store({})

原来我们在根实例中传递的是一个Store实例，这样我们就明白了vuexInit方法的主要作用了：给每一个Vue实例都赋值一个$store属性。

这样，我们在组件中就不用去手动引入store了，而是可以直接使用$store，例如：

<template>
  <div>{{$store.state.xxx}}</div>
</template>