vuex源码解析01index与install

index.js

index 文件夹主要是为了导出vuex提供的模块

import { Store, install } from './store'
import { mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers } from './helpers'
`export default {`
  `Store,`// Store:包含状态的容器`
  `install,`// install: 提供给Vue.use()全局挂载的install`
  `version: '__VERSION__',`
  `mapState,`// mapState: 展开state的内容`
  `mapMutations,`// mapMutations:展开mutations的内容`
  `mapGetters,`// mapGetters:展开getter的内容`
  `mapActions,`// mapActions:展开actions的内容`
  `createNamespacedHelpers`// createNamespacedHelpers:创建基于命名空间的组件绑定辅助函数` 
}

store.js中的 install函数

我们在使用vuex的时候是vue.use(vuex),这个是怎么实现的呢？

1. vue的插件系统，提供了use函数，方便我们引入插件
2. use函数规定，每个插件都需要编写install函数，vuex在store.js中提供了install函数

// 这里的_vue是一个全局变量，用来接收vue
// vue使用插件的方法很简单，只需Vue.use(Plugins)即可使用插件。在vue中是如何实现的呢?
// 了解vue的话，你应该知道，use()，接收一个install方法，这个install由插件开发者定义。
// 最后达到全局注册组件。
export function install(_Vue) {
  // 判断已经引入过插件。防止重复引入。其实在vue.use中也会判断时候已经装过
  if (Vue && _Vue === Vue) {
    if (process.env.NODE_ENV !== 'production') {
      console.error(
        '[vuex] already installed. Vue.use(Vuex) should be called only once.'
      )
    }
    return
  }
  // 如果没有引入，调用applyMixin().此方法位于mixin.js
  Vue = _Vue
  applyMixin(Vue)
}

install函数调用applyMixin().此方法位于mixin.js

// 执行vuexInit方法初始化Vuex

// 这里针对Vue1.0与2.0分别进行了不同的处理
// Vue1.0，Vuex会将vuexInit方法放入Vue的_init方法中，
// Vue2.0，则会将vuexinit混淆进Vue的beforeCreate钩子中。
export default function (Vue) {
  //获取vue的版本
  const version = Number(Vue.version.split('.')[0])
  // 如果vue的版本大于2的话,直接调用vuexInit放入beforeCreate钩子中
  if (version >= 2) {
    // 使用mixin方法，在组件创建前加入vuexInit
    Vue.mixin({ beforeCreate: vuexInit })
  } else {

    // 重写init，将vuexInit放入init中
    // 先把Vue.prototype._init存放在常量中，防止修改
    const _init = Vue.prototype._init
    Vue.prototype._init = function (options = {}) {
      options.init = options.init
        ? [vuexInit].concat(options.init)
        : vuexInit
      _init.call(this, options)
    }
  }

  // 在 vuexInit 中，将 new Vue() 时传入的 store 设置到 this 对象的 $store 属性上，//
  // ！！！
  // 注意，因为每个组件都会被渲染，在上面使用mixin进行了混入，所以vuexInit在组件被创建之前都会被调用。
  // vue渲染组件的方法是先渲染父组件在渲染子组件，深度优先。
  // new Vue() 时传入的 store，这个时候，store已经挂在最上面的root(根)组件上。
  // 子组件则从其父组件上引用其 $store 属性进行层层嵌套设置，保证每一个组件中都可以通过 this.$store 取到 store 对象。
  // 通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，注入方法是子从父拿，root从options拿。
  function vuexInit() {
    // vue 提供的一个实例属性，用来获取Vue实例的自定义属性（如vm.$options.methods,获取Vue实例的自定义属性methods）
    const options = this.$options
    // 如果 new Vue() 时传入了 store 
    // 如果本身就是父组件
    if (options.store) {
      // 则将store挂在到this上，也就是vue上
      this.$store = typeof options.store === 'function'
        ? options.store()
        : options.store
    } else if (options.parent && options.parent.$store) {
      // 如果某个组件存在父级组件，并且父级组件存在$store，则将该组件上也挂载$store
      this.$store = options.parent.$store
    }
  }
}