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，則能檢查到這個狀態修改是有問題的。