前端日报--学习vuex（二）

学习源码，特别是有关vue,网络上一大把。但是为啥还要写这些相似甚至是相同的内容。原因有那么几个：
1、记录自己的学习过程。
2、能看懂，并且能够跟着节奏看的舒服去看文章有点少。

store的构造函数

在项目中我们这样使用store:

import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user';
Vue.use(Vuex);
const store = new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  modules: {
    user
  }
});
export default store;

然后把store放到这里：

new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'
})

在单页面的开发过程中，先vue.use(vuex)，然后实例化store。store的构造方法在store.js里。相关理解与说明本坑以***的形式标注。

export class Store {
  constructor (options = {}) {
    // Auto install if it is not done yet and `window` has `Vue`.
    // To allow users to avoid auto-installation in some cases,
    // this code should be placed here. See #731
   ***如果是单页面导入vue，那么如果实例化之前没有Vue.use(Vuex) ,如果是脚本进入挂载在window，vue会自动安装插件***
    if (!Vue && typeof window !== 'undefined' && window.Vue) {
      install(window.Vue)
    }

    if (process.env.NODE_ENV !== 'production') {
      assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`)
      assert(typeof Promise !== 'undefined', `vuex requires a Promise polyfill in this browser.`)
      assert(this instanceof Store, `store must be called with the new operator.`)
    }

    const {
      plugins = [],
      strict = false
    } = options
     ***这里开始初始化一系列变量像actions ,mutations,getters，具体每个核心方法，在接下来继续学习理解说明***
    // store internal state
    this._committing = false
    this._actions = Object.create(null)
    this._actionSubscribers = []
    this._mutations = Object.create(null)
    this._wrappedGetters = Object.create(null)
   ***收集options里的modules***
    this._modules = new ModuleCollection(options)
    this._modulesNamespaceMap = Object.create(null)
    this._subscribers = []
    ***这里，实例化了个Vue，主要是利用 Vue 实例方法 $watch 来观测变化的***
    this._watcherVM = new Vue()

    // bind commit and dispatch to self
    const store = this
    const { dispatch, commit } = this
***把dispatch和commit方法绑定到当前的store里***
    this.dispatch = function boundDispatch (type, payload) {
      return dispatch.call(store, type, payload)
    }
    this.commit = function boundCommit (type, payload, options) {
      return commit.call(store, type, payload, options)
    }

    // strict mode
    this.strict = strict

    const state = this._modules.root.state

    // init root module.
    // this also recursively registers all sub-modules
    // and collects all module getters inside this._wrappedGetters
    ***初始化各个模块，在下面会具体学习说明***
    installModule(this, state, [], this._modules.root)

    // initialize the store vm, which is responsible for the reactivity
    // (also registers _wrappedGetters as computed properties)
    ***实现响应式核心模块，在下面具体学习说明***
    resetStoreVM(this, state)

    // apply plugins
    plugins.forEach(plugin => plugin(this))
     ***devtoolPlugin***
    const useDevtools = options.devtools !== undefined ? options.devtools : Vue.config.devtools
    if (useDevtools) {
      devtoolPlugin(this)
    }
  }
......此处省略
}
......此处省略
}

由此我们知道了大概的流程，我们要使用vuex ,一开始要安装vuex,把vuexInit放到vue的周期环境里头，它的目的是让每一层的实例里能够访问到同一个store，紧接着实例化store,并且初始化各个store模块installModule，最后把所有该绑定的数据要和vue的数据监听绑定上resetStoreVM，让store的数据和其他数据一样是响应式。
下一节，我们认真学习下installModule和resetStoreVM。