# 安装

上文中，我们提到，按照是调用的install方法，我们找到Vuex的入口文件src/index.js

import { Store, install } from './store'
import { mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers } from './helpers'
import createLogger from './plugins/logger'

export default {
  Store,
  install,
  version: '__VERSION__',
  mapState,
  mapMutations,
  mapGetters,
  mapActions,
  createNamespacedHelpers,
  createLogger
}

export {
  Store,
  install,
  mapState,
  mapMutations,
  mapGetters,
  mapActions,
  createNamespacedHelpers,
  createLogger
}
成功

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

可以发现，install方法是在src/store.js中

let Vue // bind on install

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)
}
成功

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

install方法的逻辑比较简单，将传入的_Vue赋值给空变量Vue中，防止重复渲染，然后执行applyMixin方法

applyMixin方法在src/mixin.js中，针对Vue2以上版本代码，简化如下

export default function (Vue) {
  Vue.mixin({ beforeCreate: vuexInit })

  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
    }
  }
}
成功

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

简化后的代码调用了Vue.mixin方法，全局混入了一个 beforeCreate 钩子函数

vuexInit的逻辑较为简单，把 options.store 保存在所有组件的 this.$store 中，这个 options.store 就是我们在实例化 Store 对象的实例，我们下节去分析。

← 前言前言 →