学习源码，特别是有关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。
