详解vuex之store源码简单解析

export class Store {
 constructor (options = {}) {
 // 若window内不存在vue，则重新定义Vue
 if (!Vue && typeof window !== 'undefined' && window.Vue) {
 install(window.Vue)
 }

 if (process.env.NODE_ENV !== 'production') {
 // 断言函数，来判断是否满足一些条件
 // 确保 Vue 的存在
 assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`)
 // 确保 Promsie 可以使用
 assert(typeof Promise !== 'undefined', `vuex requires a Promise polyfill in this browser.`)
 assert(this instanceof Store, `store must be called with the new operator.`)
 }

 // 解构赋值，拿到options里的plugins和strict
 const {
 plugins = [],
 strict = false
 } = options

 // 创建内部属性
 // 标志一个提交状态，作用是保证对 Vuex 中 state 的修改只能在 mutation 的回调函数中，而不能在外部随意修改 state
 this._committing = false 
 // 用来存储用户定义的所有的actions
 this._actions = Object.create(null)
 this._actionSubscribers = []
 // 用来存储用户定义所有的mutatins
 this._mutations = Object.create(null)
 // 用来存储用户定义的所有getters 
 this._wrappedGetters = Object.create(null)
 // 用来存储所有的运行时的 modules
 this._modules = new ModuleCollection(options)
 this._modulesNamespaceMap = Object.create(null)
 // 用来存储所有对 mutation 变化的订阅者
 this._subscribers = []
 // 一个 Vue对象的实例，主要是利用 Vue 实例方法 $watch 来观测变化的
 this._watcherVM = new Vue()

 // 把Store类的dispatch和commit的方法的this指针指向当前store的实例上
 const store = this
 const { dispatch, commit } = this
 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)
 }

 // 是否开启严格模式
 this.strict = strict

 const state = this._modules.root.state

 // Vuex的初始化的核心，其中，installModule方法是把我们通过options传入的各种属性模块注册和安装；
 // resetStoreVM 方法是初始化 store._vm，观测 state 和 getters 的变化；最后是应用传入的插件。
 installModule(this, state, [], this._modules.root)

 resetStoreVM(this, state)
 plugins.forEach(plugin => plugin(this))

 const useDevtools = options.devtools !== undefined ? options.devtools : Vue.config.devtools
 if (useDevtools) {
 devtoolPlugin(this)
 }
 }

function installModule (store, rootState, path, module, hot) {
 // 通过path数组的长度判断是否为根
 const isRoot = !path.length
 const namespace = store._modules.getNamespace(path)

 // register in namespace map
 if (module.namespaced) {
 store._modulesNamespaceMap[namespace] = module
 }

 // 第一次调用时，path为空，不进入if
 // 递归调用installModule安装子模块时，将执行该代码块
 if (!isRoot && !hot) {
 const parentState = getNestedState(rootState, path.slice(0, -1))
 // 模块名
 const moduleName = path[path.length - 1]
 // 把当前模块的state添加到parentState中。具体解析见下
 store._withCommit(() => {
 Vue.set(parentState, moduleName, module.state)
 })
 }

 const local = module.context = makeLocalContext(store, namespace, path)

 // 对mutations、actions、getters进行注册
 module.forEachMutation((mutation, key) => {
 const namespacedType = namespace + key
 registerMutation(store, namespacedType, mutation, local)
 })

 module.forEachAction((action, key) => {
 const type = action.root ? key : namespace + key
 const handler = action.handler || action
 registerAction(store, type, handler, local)
 })

 module.forEachGetter((getter, key) => {
 const namespacedType = namespace + key
 registerGetter(store, namespacedType, getter, local)
 })

 // 遍历modules，递归调用installModule安装子模块
 module.forEachChild((child, key) => {
 installModule(store, rootState, path.concat(key), child, hot)
 })
}
store的_withCommit方法定义是这样的:

 _withCommit (fn) {
 const committing = this._committing
 this._committing = true
 fn()
 this._committing = committing
 }