vuex之store源码简单解析

关于 vuex 的基础部分学习于 https://blog.csdn.net/qq_3865…

使用 Vuex 的时候，通常会实例化 Store 类，然后传入一个对象，包括我们定义好的 actions、getters、mutations、state 等。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)
    }
  }

Vuex 本身是单一状态树，应用的所有状态都包含在一个大对象内，随着我们应用规模的不断增长，这个 Store 变得非常臃肿。为了解决这个问题，Vuex 允许我们把 store 分模块。每一个模块包含各自的 state、mutations、actions 和 getters，甚至还可以嵌套模块。
接下来看 installModule 方法：

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
  }

Vuex 中所有对 state 的修改都会用_withCommit 函数包装，保证在同步修改 state 的过程中 this._committing 的值始终为 true。这样当我们观测 state 的变化时，如果 this._committing 的值不为 true，则能检查到这个状态修改是有问题的。