• Vuex 初始化
    • 安装
    • Store 实例化
      • 初始化模块
      • 安装模块
      • 初始化 store._vm
    • 总结

    Vuex 初始化

    这一节我们主要来分析 Vuex 的初始化过程，它包括安装、Store 实例化过程 2 个方面。

    安装

    当我们在代码中通过 import Vuex from 'vuex' 的时候，实际上引用的是一个对象，它的定义在 src/index.js 中：

    1. export default {
    2.   Store,
    3.   install,
    4.   version: '__VERSION__',
    5.   mapState,
    6.   mapMutations,
    7.   mapGetters,
    8.   mapActions,
    9.   createNamespacedHelpers
    10. }

    和 Vue-Router 一样，Vuex 也同样存在一个静态的 install 方法，它的定义在 src/store.js 中：

    1. export function install (_Vue) {
    2.   if (Vue && _Vue === Vue) {
    3.     if (process.env.NODE_ENV !== 'production') {
    4.       console.error(
    5.         '[vuex] already installed. Vue.use(Vuex) should be called only once.'
    6.       )
    7.     }
    8.     return
    9.   }
    10.   Vue = _Vue
    11.   applyMixin(Vue)
    12. }

    install 的逻辑很简单，把传入的 _Vue 赋值给 Vue 并执行了 applyMixin(Vue) 方法，它的定义在 src/mixin.js 中：

    1. export default function (Vue) {
    2.   const version = Number(Vue.version.split('.')[0])
    4.   if (version >= 2) {
    5.     Vue.mixin({ beforeCreate: vuexInit })
    6.   } else {
    7.     // override init and inject vuex init procedure
    8.     // for 1.x backwards compatibility.
    9.     const _init = Vue.prototype._init
    10.     Vue.prototype._init = function (options = {}) {
    11.       options.init = options.init
    12.         ? [vuexInit].concat(options.init)
    13.         : vuexInit
    14.       _init.call(this, options)
    15.     }
    16.   }
    18.   /**
    19.    * Vuex init hook, injected into each instances init hooks list.
    20.    */
    22.   function vuexInit () {
    23.     const options = this.$options
    24.     // store injection
    25.     if (options.store) {
    26.       this.$store = typeof options.store === 'function'
    27.         ? options.store()
    28.         : options.store
    29.     } else if (options.parent && options.parent.$store) {
    30.       this.$store = options.parent.$store
    31.     }
    32.   }
    33. }

    applyMixin 就是这个 export default function，它还兼容了 Vue 1.0 的版本，这里我们只关注 Vue 2.0 以上版本的逻辑，它其实就全局混入了一个 beforeCreate 钩子函数，它的实现非常简单，就是把 options.store 保存在所有组件的 this.$store 中，这个 options.store 就是我们在实例化 Store 对象的实例，稍后我们会介绍，这也是为什么我们在组件中可以通过 this.$store 访问到这个实例。

    Store 实例化

    我们在 import Vuex 之后，会实例化其中的 Store 对象，返回 store 实例并传入 new Vue 的 options 中，也就是我们刚才提到的 options.store.

    举个简单的例子，如下：

    1. export default new Vuex.Store({
    2.   actions,
    3.   getters,
    4.   state,
    5.   mutations,
    6.   modules
    7.   // ...
    8. })

    Store 对象的构造函数接收一个对象参数，它包含 actions、getters、state、mutations、modules 等 Vuex 的核心概念，它的定义在 src/store.js 中：

    1. export class Store {
    2.   constructor (options = {}) {
    3.     // Auto install if it is not done yet and `window` has `Vue`.
    4.     // To allow users to avoid auto-installation in some cases,
    5.     // this code should be placed here. See #731
    6.     if (!Vue && typeof window !== 'undefined' && window.Vue) {
    7.       install(window.Vue)
    8.     }
    10.     if (process.env.NODE_ENV !== 'production') {
    11.       assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`)
    12.       assert(typeof Promise !== 'undefined', `vuex requires a Promise polyfill in this browser.`)
    13.       assert(this instanceof Store, `Store must be called with the new operator.`)
    14.     }
    16.     const {
    17.       plugins = [],
    18.       strict = false
    19.     } = options
    21.     // store internal state
    22.     this._committing = false
    23.     this._actions = Object.create(null)
    24.     this._actionSubscribers = []
    25.     this._mutations = Object.create(null)
    26.     this._wrappedGetters = Object.create(null)
    27.     this._modules = new ModuleCollection(options)
    28.     this._modulesNamespaceMap = Object.create(null)
    29.     this._subscribers = []
    30.     this._watcherVM = new Vue()
    32.     // bind commit and dispatch to self
    33.     const store = this
    34.     const { dispatch, commit } = this
    35.     this.dispatch = function boundDispatch (type, payload) {
    36.       return dispatch.call(store, type, payload)
    37.     }
    38.     this.commit = function boundCommit (type, payload, options) {
    39.       return commit.call(store, type, payload, options)
    40.     }
    42.     // strict mode
    43.     this.strict = strict
    45.     const state = this._modules.root.state
    47.     // init root module.
    48.     // this also recursively registers all sub-modules
    49.     // and collects all module getters inside this._wrappedGetters
    50.     installModule(this, state, [], this._modules.root)
    52.     // initialize the store vm, which is responsible for the reactivity
    53.     // (also registers _wrappedGetters as computed properties)
    54.     resetStoreVM(this, state)
    56.     // apply plugins
    57.     plugins.forEach(plugin => plugin(this))
    59.     if (Vue.config.devtools) {
    60.       devtoolPlugin(this)
    61.     }
    62.   }
    63. }

    我们把 Store 的实例化过程拆成 3 个部分，分别是初始化模块，安装模块和初始化 store._vm，接下来我们来分析这 3 部分的实现。

    初始化模块

    在分析模块初始化之前，我们先来了解一下模块对于 Vuex 的意义：由于使用单一状态树，应用的所有状态会集中到一个比较大的对象，当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter，甚至是嵌套子模块——从上至下进行同样方式的分割：

    1. const moduleA = {
    2.   state: { ... },
    3.   mutations: { ... },
    4.   actions: { ... },
    5.   getters: { ... }
    6. }
    8. const moduleB = {
    9.   state: { ... },
    10.   mutations: { ... },
    11.   actions: { ... },
    12.   getters: { ... },
    13. }
    15. const store = new Vuex.Store({
    16.   modules: {
    17.     a: moduleA,
    18.     b: moduleB
    19.   }
    20. })
    22. store.state.a // -> moduleA 的状态
    23. store.state.b // -> moduleB 的状态

    所以从数据结构上来看，模块的设计就是一个树型结构，store 本身可以理解为一个 root module，它下面的 modules 就是子模块，Vuex 需要完成这颗树的构建，构建过程的入口就是：

    1. this._modules = new ModuleCollection(options)

    ModuleCollection 的定义在 src/module/module-collection.js 中：

    1. export default class ModuleCollection {
    2.   constructor (rawRootModule) {
    3.     // register root module (Vuex.Store options)
    4.     this.register([], rawRootModule, false)
    5.   }
    7.   get (path) {
    8.     return path.reduce((module, key) => {
    9.       return module.getChild(key)
    10.     }, this.root)
    11.   }
    13.   getNamespace (path) {
    14.     let module = this.root
    15.     return path.reduce((namespace, key) => {
    16.       module = module.getChild(key)
    17.       return namespace + (module.namespaced ? key + '/' : '')
    18.     }, '')
    19.   }
    21.   update (rawRootModule) {
    22.     update([], this.root, rawRootModule)
    23.   }
    25.   register (path, rawModule, runtime = true) {
    26.     if (process.env.NODE_ENV !== 'production') {
    27.       assertRawModule(path, rawModule)
    28.     }
    30.     const newModule = new Module(rawModule, runtime)
    31.     if (path.length === 0) {
    32.       this.root = newModule
    33.     } else {
    34.       const parent = this.get(path.slice(0, -1))
    35.       parent.addChild(path[path.length - 1], newModule)
    36.     }
    38.     // register nested modules
    39.     if (rawModule.modules) {
    40.       forEachValue(rawModule.modules, (rawChildModule, key) => {
    41.         this.register(path.concat(key), rawChildModule, runtime)
    42.       })
    43.     }
    44.   }
    46.   unregister (path) {
    47.     const parent = this.get(path.slice(0, -1))
    48.     const key = path[path.length - 1]
    49.     if (!parent.getChild(key).runtime) return
    51.     parent.removeChild(key)
    52.   }
    53. }

    ModuleCollection 实例化的过程就是执行了 register 方法，register 接收 3 个参数，其中 path 表示路径，因为我们整体目标是要构建一颗模块树，path 是在构建树的过程中维护的路径；rawModule 表示定义模块的原始配置；runtime 表示是否是一个运行时创建的模块。

    register 方法首先通过 const newModule = new Module(rawModule, runtime) 创建了一个 Module 的实例，Module 是用来描述单个模块的类，它的定义在 src/module/module.js 中：

    1. export default class Module {
    2.   constructor (rawModule, runtime) {
    3.     this.runtime = runtime
    4.     // Store some children item
    5.     this._children = Object.create(null)
    6.     // Store the origin module object which passed by programmer
    7.     this._rawModule = rawModule
    8.     const rawState = rawModule.state
    10.     // Store the origin module's state
    11.     this.state = (typeof rawState === 'function' ? rawState() : rawState) || {}
    12.   }
    14.   get namespaced () {
    15.     return !!this._rawModule.namespaced
    16.   }
    18.   addChild (key, module) {
    19.     this._children[key] = module
    20.   }
    22.   removeChild (key) {
    23.     delete this._children[key]
    24.   }
    26.   getChild (key) {
    27.     return this._children[key]
    28.   }
    30.   update (rawModule) {
    31.     this._rawModule.namespaced = rawModule.namespaced
    32.     if (rawModule.actions) {
    33.       this._rawModule.actions = rawModule.actions
    34.     }
    35.     if (rawModule.mutations) {
    36.       this._rawModule.mutations = rawModule.mutations
    37.     }
    38.     if (rawModule.getters) {
    39.       this._rawModule.getters = rawModule.getters
    40.     }
    41.   }
    43.   forEachChild (fn) {
    44.     forEachValue(this._children, fn)
    45.   }
    47.   forEachGetter (fn) {
    48.     if (this._rawModule.getters) {
    49.       forEachValue(this._rawModule.getters, fn)
    50.     }
    51.   }
    53.   forEachAction (fn) {
    54.     if (this._rawModule.actions) {
    55.       forEachValue(this._rawModule.actions, fn)
    56.     }
    57.   }
    59.   forEachMutation (fn) {
    60.     if (this._rawModule.mutations) {
    61.       forEachValue(this._rawModule.mutations, fn)
    62.     }
    63.   }
    64. }

    来看一下 Module 的构造函数，对于每个模块而言，this._rawModule 表示模块的配置，this._children 表示它的所有子模块，this.state 表示这个模块定义的 state。

    回到 register，那么在实例化一个 Module 后，判断当前的 path 的长度如果为 0，则说明它是一个根模块，所以把 newModule 赋值给了 this.root，否则就需要建立父子关系了：

    1. const parent = this.get(path.slice(0, -1))
    2. parent.addChild(path[path.length - 1], newModule)

    我们先大体上了解它的逻辑：首先根据路径获取到父模块，然后再调用父模块的 addChild 方法建立父子关系。

    register 的最后一步，就是遍历当前模块定义中的所有 modules，根据 key 作为 path，递归调用 register 方法，这样我们再回过头看一下建立父子关系的逻辑，首先执行了 this.get(path.slice(0, -1) 方法：

    1. get (path) {
    2.   return path.reduce((module, key) => {
    3.     return module.getChild(key)
    4.   }, this.root)
    5. }

    传入的 path 是它的父模块的 path，然后从根模块开始，通过 reduce 方法一层层去找到对应的模块，查找的过程中，执行的是 module.getChild(key) 方法：

    1. getChild (key) {
    2.   return this._children[key]
    3. }

    其实就是返回当前模块的 _children 中对应 key 的模块，那么每个模块的 _children 是如何添加的呢，是通过执行 parent.addChild(path[path.length - 1], newModule) 方法：

    1. addChild (key, module) {
    2.   this._children[key] = module
    3. }

    所以说对于 root module 的下一层 modules 来说，它们的 parent 就是 root module，那么他们就会被添加的 root module 的 _children 中。每个子模块通过路径找到它的父模块，然后通过父模块的 addChild 方法建立父子关系，递归执行这样的过程，最终就建立一颗完整的模块树。

    安装模块

    初始化模块后，执行安装模块的相关逻辑，它的目标就是对模块中的 state、getters、mutations、actions 做初始化工作，它的入口代码是：

    1. const state = this._modules.root.state
    2. installModule(this, state, [], this._modules.root)

    来看一下 installModule 的定义：

    1. function installModule (store, rootState, path, module, hot) {
    2.   const isRoot = !path.length
    3.   const namespace = store._modules.getNamespace(path)
    5.   // register in namespace map
    6.   if (module.namespaced) {
    7.     store._modulesNamespaceMap[namespace] = module
    8.   }
    10.   // set state
    11.   if (!isRoot && !hot) {
    12.     const parentState = getNestedState(rootState, path.slice(0, -1))
    13.     const moduleName = path[path.length - 1]
    14.     store._withCommit(() => {
    15.       Vue.set(parentState, moduleName, module.state)
    16.     })
    17.   }
    19.   const local = module.context = makeLocalContext(store, namespace, path)
    21.   module.forEachMutation((mutation, key) => {
    22.     const namespacedType = namespace + key
    23.     registerMutation(store, namespacedType, mutation, local)
    24.   })
    26.   module.forEachAction((action, key) => {
    27.     const type = action.root ? key : namespace + key
    28.     const handler = action.handler || action
    29.     registerAction(store, type, handler, local)
    30.   })
    32.   module.forEachGetter((getter, key) => {
    33.     const namespacedType = namespace + key
    34.     registerGetter(store, namespacedType, getter, local)
    35.   })
    37.   module.forEachChild((child, key) => {
    38.     installModule(store, rootState, path.concat(key), child, hot)
    39.   })
    40. }

    installModule 方法支持 5 个参数，store 表示 root store；state 表示 root state；path 表示模块的访问路径；module 表示当前的模块，hot 表示是否是热更新。

    接下来看函数逻辑，这里涉及到了命名空间的概念，默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。如果我们希望模块具有更高的封装度和复用性，可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。例如：

    1. const store = new Vuex.Store({
    2.   modules: {
    3.     account: {
    4.       namespaced: true,
    6.       // 模块内容（module assets）
    7.       state: { ... }, // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
    8.       getters: {
    9.         isAdmin () { ... } // -> getters['account/isAdmin']
    10.       },
    11.       actions: {
    12.         login () { ... } // -> dispatch('account/login')
    13.       },
    14.       mutations: {
    15.         login () { ... } // -> commit('account/login')
    16.       },
    18.       // 嵌套模块
    19.       modules: {
    20.         // 继承父模块的命名空间
    21.         myPage: {
    22.           state: { ... },
    23.           getters: {
    24.             profile () { ... } // -> getters['account/profile']
    25.           }
    26.         },
    28.         // 进一步嵌套命名空间
    29.         posts: {
    30.           namespaced: true,
    32.           state: { ... },
    33.           getters: {
    34.             popular () { ... } // -> getters['account/posts/popular']
    35.           }
    36.         }
    37.       }
    38.     }
    39.   }
    40. })

    回到 installModule 方法，我们首先根据 path 获取 namespace：

    1. const namespace = store._modules.getNamespace(path)

    getNamespace 的定义在 src/module/module-collection.js 中：

    1. getNamespace (path) {
    2.   let module = this.root
    3.   return path.reduce((namespace, key) => {
    4.     module = module.getChild(key)
    5.     return namespace + (module.namespaced ? key + '/' : '')
    6.   }, '')
    7. }

    从 root module 开始，通过 reduce 方法一层层找子模块，如果发现该模块配置了 namespaced 为 true，则把该模块的 key 拼到 namesapce 中，最终返回完整的 namespace 字符串。

    回到 installModule 方法，接下来把 namespace 对应的模块保存下来，为了方便以后能根据 namespace 查找模块：

    1. if (module.namespaced) {
    2.   store._modulesNamespaceMap[namespace] = module
    3. }

    接下来判断非 root module 且非 hot 的情况执行一些逻辑，我们稍后再看。

    接着是很重要的逻辑，构造了一个本地上下文环境：

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

    来看一下 makeLocalContext 实现：

    1. function makeLocalContext (store, namespace, path) {
    2.   const noNamespace = namespace === ''
    4.   const local = {
    5.     dispatch: noNamespace ? store.dispatch : (_type, _payload, _options) => {
    6.       const args = unifyObjectStyle(_type, _payload, _options)
    7.       const { payload, options } = args
    8.       let { type } = args
    10.       if (!options || !options.root) {
    11.         type = namespace + type
    12.         if (process.env.NODE_ENV !== 'production' && !store._actions[type]) {
    13.           console.error(`[vuex] unknown local action type: ${args.type}, global type: ${type}`)
    14.           return
    15.         }
    16.       }
    18.       return store.dispatch(type, payload)
    19.     },
    21.     commit: noNamespace ? store.commit : (_type, _payload, _options) => {
    22.       const args = unifyObjectStyle(_type, _payload, _options)
    23.       const { payload, options } = args
    24.       let { type } = args
    26.       if (!options || !options.root) {
    27.         type = namespace + type
    28.         if (process.env.NODE_ENV !== 'production' && !store._mutations[type]) {
    29.           console.error(`[vuex] unknown local mutation type: ${args.type}, global type: ${type}`)
    30.           return
    31.         }
    32.       }
    34.       store.commit(type, payload, options)
    35.     }
    36.   }
    38.   // getters and state object must be gotten lazily
    39.   // because they will be changed by vm update
    40.   Object.defineProperties(local, {
    41.     getters: {
    42.       get: noNamespace
    43.         ? () => store.getters
    44.         : () => makeLocalGetters(store, namespace)
    45.     },
    46.     state: {
    47.       get: () => getNestedState(store.state, path)
    48.     }
    49.   })
    51.   return local
    52. }

    makeLocalContext 支持 3 个参数相关，store 表示 root store；namespace 表示模块的命名空间，path 表示模块的 path。

    该方法定义了 local 对象，对于 dispatch 和 commit 方法，如果没有 namespace，它们就直接指向了 root store 的 dispatch 和 commit 方法，否则会创建方法，把 type 自动拼接上 namespace，然后执行 store 上对应的方法。

    对于 getters 而言，如果没有 namespace，则直接返回 root store 的 getters，否则返回 makeLocalGetters(store, namespace) 的返回值：

    1. function makeLocalGetters (store, namespace) {
    2.   const gettersProxy = {}
    4.   const splitPos = namespace.length
    5.   Object.keys(store.getters).forEach(type => {
    6.     // skip if the target getter is not match this namespace
    7.     if (type.slice(0, splitPos) !== namespace) return
    9.     // extract local getter type
    10.     const localType = type.slice(splitPos)
    12.     // Add a port to the getters proxy.
    13.     // Define as getter property because
    14.     // we do not want to evaluate the getters in this time.
    15.     Object.defineProperty(gettersProxy, localType, {
    16.       get: () => store.getters[type],
    17.       enumerable: true
    18.     })
    19.   })
    21.   return gettersProxy
    22. }

    makeLocalGetters 首先获取了 namespace 的长度，然后遍历 root store 下的所有 getters，先判断它的类型是否匹配 namespace，只有匹配的时候我们从 namespace 的位置截取后面的字符串得到 localType，接着用 Object.defineProperty 定义了 gettersProxy，获取 localType 实际上是访问了 store.getters[type]。

    回到 makeLocalContext 方法，再来看一下对 state 的实现，它的获取则是通过 getNestedState(store.state, path) 方法：

    1. function getNestedState (state, path) {
    2.   return path.length
    3.     ? path.reduce((state, key) => state[key], state)
    4.     : state
    5. }

    getNestedState 逻辑很简单，从 root state 开始，通过 path.reduce 方法一层层查找子模块 state，最终找到目标模块的 state。

    那么构造完 local 上下文后，我们再回到 installModule 方法，接下来它就会遍历模块中定义的 mutations、actions、getters，分别执行它们的注册工作，它们的注册逻辑都大同小异。

    • registerMutation
    1. module.forEachMutation((mutation, key) => {
    2.   const namespacedType = namespace + key
    3.   registerMutation(store, namespacedType, mutation, local)
    4. })
    6. function registerMutation (store, type, handler, local) {
    7.   const entry = store._mutations[type] || (store._mutations[type] = [])
    8.   entry.push(function wrappedMutationHandler (payload) {
    9.     handler.call(store, local.state, payload)
    10.   })
    11. }

    首先遍历模块中的 mutations 的定义，拿到每一个 mutation 和 key，并把 key 拼接上 namespace，然后执行 registerMutation 方法。该方法实际上就是给 root store 上的 _mutations[types] 添加 wrappedMutationHandler 方法，该方法的具体实现我们之后会提到。注意，同一 type 的 _mutations 可以对应多个方法。

    • registerAction
    1. module.forEachAction((action, key) => {
    2.   const type = action.root ? key : namespace + key
    3.   const handler = action.handler || action
    4.   registerAction(store, type, handler, local)
    5. })
    7. function registerAction (store, type, handler, local) {
    8.   const entry = store._actions[type] || (store._actions[type] = [])
    9.   entry.push(function wrappedActionHandler (payload, cb) {
    10.     let res = handler.call(store, {
    11.       dispatch: local.dispatch,
    12.       commit: local.commit,
    13.       getters: local.getters,
    14.       state: local.state,
    15.       rootGetters: store.getters,
    16.       rootState: store.state
    17.     }, payload, cb)
    18.     if (!isPromise(res)) {
    19.       res = Promise.resolve(res)
    20.     }
    21.     if (store._devtoolHook) {
    22.       return res.catch(err => {
    23.         store._devtoolHook.emit('vuex:error', err)
    24.         throw err
    25.       })
    26.     } else {
    27.       return res
    28.     }
    29.   })
    30. }

    首先遍历模块中的 actions 的定义，拿到每一个 action 和 key，并判断 action.root，如果否的情况把 key 拼接上 namespace，然后执行 registerAction 方法。该方法实际上就是给 root store 上的 _actions[types] 添加 wrappedActionHandler 方法，该方法的具体实现我们之后会提到。注意，同一 type 的 _actions 可以对应多个方法。

    • registerGetter
    1. module.forEachGetter((getter, key) => {
    2.   const namespacedType = namespace + key
    3.   registerGetter(store, namespacedType, getter, local)
    4. })
    7. function registerGetter (store, type, rawGetter, local) {
    8.   if (store._wrappedGetters[type]) {
    9.     if (process.env.NODE_ENV !== 'production') {
    10.       console.error(`[vuex] duplicate getter key: ${type}`)
    11.     }
    12.     return
    13.   }
    14.   store._wrappedGetters[type] = function wrappedGetter (store) {
    15.     return rawGetter(
    16.       local.state, // local state
    17.       local.getters, // local getters
    18.       store.state, // root state
    19.       store.getters // root getters
    20.     )
    21.   }
    22. }

    首先遍历模块中的 getters 的定义，拿到每一个 getter 和 key，并把 key 拼接上 namespace，然后执行 registerGetter 方法。该方法实际上就是给 root store 上的 _wrappedGetters[key] 指定 wrappedGetter 方法，该方法的具体实现我们之后会提到。注意，同一 type 的 _wrappedGetters 只能定义一个。

    再回到 installModule 方法，最后一步就是遍历模块中的所有子 modules，递归执行 installModule 方法：

    1. module.forEachChild((child, key) => {
    2.   installModule(store, rootState, path.concat(key), child, hot)
    3. })

    之前我们忽略了非 root module 下的 state 初始化逻辑，现在来看一下：

    1. if (!isRoot && !hot) {
    2.   const parentState = getNestedState(rootState, path.slice(0, -1))
    3.   const moduleName = path[path.length - 1]
    4.   store._withCommit(() => {
    5.     Vue.set(parentState, moduleName, module.state)
    6.   })
    7. }

    之前我们提到过 getNestedState 方法，它是从 root state 开始，一层层根据模块名能访问到对应 path 的 state，那么它每一层关系的建立实际上就是通过这段 state 的初始化逻辑。store._withCommit 方法我们之后再介绍。

    所以 installModule 实际上就是完成了模块下的 state、getters、actions、mutations 的初始化工作，并且通过递归遍历的方式，就完成了所有子模块的安装工作。

    初始化 store._vm

    Store 实例化的最后一步，就是执行初始化 store._vm 的逻辑，它的入口代码是：

    1. resetStoreVM(this, state)

    来看一下 resetStoreVM 的定义：

    1. function resetStoreVM (store, state, hot) {
    2.   const oldVm = store._vm
    4.   // bind store public getters
    5.   store.getters = {}
    6.   const wrappedGetters = store._wrappedGetters
    7.   const computed = {}
    8.   forEachValue(wrappedGetters, (fn, key) => {
    9.     // use computed to leverage its lazy-caching mechanism
    10.     computed[key] = () => fn(store)
    11.     Object.defineProperty(store.getters, key, {
    12.       get: () => store._vm[key],
    13.       enumerable: true // for local getters
    14.     })
    15.   })
    17.   // use a Vue instance to store the state tree
    18.   // suppress warnings just in case the user has added
    19.   // some funky global mixins
    20.   const silent = Vue.config.silent
    21.   Vue.config.silent = true
    22.   store._vm = new Vue({
    23.     data: {
    24.       $$state: state
    25.     },
    26.     computed
    27.   })
    28.   Vue.config.silent = silent
    30.   // enable strict mode for new vm
    31.   if (store.strict) {
    32.     enableStrictMode(store)
    33.   }
    35.   if (oldVm) {
    36.     if (hot) {
    37.       // dispatch changes in all subscribed watchers
    38.       // to force getter re-evaluation for hot reloading.
    39.       store._withCommit(() => {
    40.         oldVm._data.$$state = null
    41.       })
    42.     }
    43.     Vue.nextTick(() => oldVm.$destroy())
    44.   }
    45. }

    resetStoreVM 的作用实际上是想建立 getters 和 state 的联系，因为从设计上 getters 的获取就依赖了 state ，并且希望它的依赖能被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。因此这里利用了 Vue 中用 computed 计算属性来实现。

    resetStoreVM 首先遍历了 _wrappedGetters 获得每个 getter 的函数 fn 和 key，然后定义了 computed[key] = () => fn(store)。我们之前提到过 _wrappedGetters 的初始化过程，这里 fn(store) 相当于执行如下方法：

    1. store._wrappedGetters[type] = function wrappedGetter (store) {
    2.   return rawGetter(
    3.     local.state, // local state
    4.     local.getters, // local getters
    5.     store.state, // root state
    6.     store.getters // root getters
    7.   )
    8. }

    返回的就是 rawGetter 的执行函数，rawGetter 就是用户定义的 getter 函数，它的前 2 个参数是 local state 和 local getters，后 2 个参数是 root state 和 root getters。

    接着实例化一个 Vue 实例 store._vm，并把 computed 传入：

    1. store._vm = new Vue({
    2.   data: {
    3.     $$state: state
    4.   },
    5.   computed
    6. })

    我们发现 data 选项里定义了 $$state 属性，而我们访问 store.state 的时候，实际上会访问 Store 类上定义的 state 的 get 方法：

    1. get state () {
    2.   return this._vm._data.$$state
    3. }

    它实际上就访问了 store._vm._data.$$state。那么 getters 和 state 是如何建立依赖逻辑的呢，我们再看这段代码逻辑：

    1. forEachValue(wrappedGetters, (fn, key) => {
    2.     // use computed to leverage its lazy-caching mechanism
    3.     computed[key] = () => fn(store)
    4.     Object.defineProperty(store.getters, key, {
    5.       get: () => store._vm[key],
    6.       enumerable: true // for local getters
    7.     })
    8.   })

    当我根据 key 访问 store.getters 的某一个 getter 的时候，实际上就是访问了 store._vm[key]，也就是 computed[key]，在执行 computed[key] 对应的函数的时候，会执行 rawGetter(local.state,…) 方法，那么就会访问到 store.state，进而访问到 store._vm._data.$$state，这样就建立了一个依赖关系。当 store.state 发生变化的时候，下一次再访问 store.getters 的时候会重新计算。

    我们再来看一下 strict mode 的逻辑：

    1. if (store.strict) {
    2.   enableStrictMode(store)
    3. }
    5. function enableStrictMode (store) {
    6.   store._vm.$watch(function () { return this._data.$$state }, () => {
    7.     if (process.env.NODE_ENV !== 'production') {
    8.       assert(store._committing, `Do not mutate vuex store state outside mutation handlers.`)
    9.     }
    10.   }, { deep: true, sync: true })
    11. }

    当严格模式下，store._vm 会添加一个 wathcer 来观测 this._data.$$state 的变化，也就是当 store.state 被修改的时候, store._committing 必须为 true，否则在开发阶段会报警告。store._committing 默认值是 false，那么它什么时候会 true 呢，Store 定义了 _withCommit 实例方法：

    1. _withCommit (fn) {
    2.   const committing = this._committing
    3.   this._committing = true
    4.   fn()
    5.   this._committing = committing
    6. }

    它就是对 fn 包装了一个环境，确保在 fn 中执行任何逻辑的时候 this._committing = true。所以外部任何非通过 Vuex 提供的接口直接操作修改 state 的行为都会在开发阶段触发警告。

    总结

    那么至此，Vuex 的初始化过程就分析完毕了，除了安装部分，我们重点分析了 Store 的实例化过程。我们要把 store 想象成一个数据仓库，为了更方便的管理仓库，我们把一个大的 store 拆成一些 modules，整个 modules 是一个树型结构。每个 module 又分别定义了 state，getters，mutations、actions，我们也通过递归遍历模块的方式都完成了它们的初始化。为了 module 具有更高的封装度和复用性，还定义了 namespace 的概念。最后我们还定义了一个内部的 Vue 实例，用来建立 state 到 getters 的联系，并且可以在严格模式下监测 state 的变化是不是来自外部，确保改变 state 的唯一途径就是显式地提交 mutation。

    这一节我们已经建立好 store，接下来就是对外提供了一些 API 方便我们对这个 store 做数据存取的操作，下一节我们就来从源码角度来分析 Vuex 提供的一系列 API。

    原文: https://ustbhuangyi.github.io/vue-analysis/vuex/init.html