分析 Vuex 的初始化过程，它包括安装、Store 实例化过程 2 个方面

安装

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

  1. import { Store, install } from './store'
  2. import { mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers } from './helpers'
  3. import createLogger from './plugins/logger'
  5. export default {
  6.   Store,
  7.   install,
  8.   version: '__VERSION__',
  9.   mapState,
  10.   mapMutations,
  11.   mapGetters,
  12.   mapActions,
  13.   createNamespacedHelpers,
  14.   createLogger
  15. }

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

  1. export function install (_Vue) {
  2.   if (Vue && _Vue === Vue) {
  3.     if (__DEV__) {
  4.       console.error(
  5.         '[vuex] already installed. Vue.use(Vuex) should be called only once.'
  6.       )
  7.     }
  8.     return
  9.   }
  10.   // 把传入的_Vue赋值给Vue并执行applyMixin(Vue)方法
  11.   Vue = _Vue
  12.   applyMixin(Vue)
  13. }

applyMixin定义在 src/mixin.js 中

  1. // applyMixin就是导出的匿名函数，兼容Vue1.x版本
  2. export default function (Vue) {
  3.   const version = Number(Vue.version.split('.')[0])
  5.   if (version >= 2) {
  6.     // Vue2.x版本 全局混入一个beforeCreate钩子函数
  7.     Vue.mixin({ beforeCreate: vuexInit })
  8.   } else { // Vue1.x版本
  9.     // override init and inject vuex init procedure
  10.     // for 1.x backwards compatibility.
  11.     const _init = Vue.prototype._init
  12.     Vue.prototype._init = function (options = {}) {
  13.       options.init = options.init
  14.         ? [vuexInit].concat(options.init)
  15.         : vuexInit
  16.       _init.call(this, options)
  17.     }
  18.   }
  20.   /**
  21.    * Vuex init hook, injected into each instances init hooks list.
  22.    */
  23.   function vuexInit () {
  24.     const options = this.$options
  25.     // store injection
  26.     if (options.store) {
  27.       // 把options.store保存在所有组件的this.$store中 options.store就是在实例化Store对象的实例，也是为什么在组件中可以通过this.$store访问到这个实例
  28.       this.$store = typeof options.store === 'function'
  29.         ? options.store()
  30.         : options.store
  31.     } else if (options.parent && options.parent.$store) {
  32.       this.$store = options.parent.$store
  33.     }
  34.   }
  35. }

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 (__DEV__) {
  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()
  31.     this._makeLocalGettersCache = Object.create(null)
  33.     // bind commit and dispatch to self
  34.     const store = this
  35.     const { dispatch, commit } = this
  36.     this.dispatch = function boundDispatch (type, payload) {
  37.       return dispatch.call(store, type, payload)
  38.     }
  39.     this.commit = function boundCommit (type, payload, options) {
  40.       return commit.call(store, type, payload, options)
  41.     }
  43.     // strict mode
  44.     this.strict = strict
  46.     const state = this._modules.root.state
  48.     // init root module.
  49.     // this also recursively registers all sub-modules
  50.     // and collects all module getters inside this._wrappedGetters
  51.     installModule(this, state, [], this._modules.root)
  53.     // initialize the store vm, which is responsible for the reactivity
  54.     // (also registers _wrappedGetters as computed properties)
  55.     resetStoreVM(this, state)
  57.     // apply plugins
  58.     plugins.forEach(plugin => plugin(this))
  60.     const useDevtools = options.devtools !== undefined ? options.devtools : Vue.config.devtools
  61.     if (useDevtools) {
  62.       devtoolPlugin(this)
  63.     }
  64.   }
  66.   get state () {
  67.     return this._vm._data.$$state
  68.   }
  70.   set state (v) {
  71.     if (__DEV__) {
  72.       assert(false, `use store.replaceState() to explicit replace store state.`)
  73.     }
  74.   }
  76.   commit (_type, _payload, _options) {
  77.     // check object-style commit
  78.     const {
  79.       type,
  80.       payload,
  81.       options
  82.     } = unifyObjectStyle(_type, _payload, _options)
  84.     const mutation = { type, payload }
  85.     const entry = this._mutations[type]
  86.     if (!entry) {
  87.       if (__DEV__) {
  88.         console.error(`[vuex] unknown mutation type: ${type}`)
  89.       }
  90.       return
  91.     }
  92.     this._withCommit(() => {
  93.       entry.forEach(function commitIterator (handler) {
  94.         handler(payload)
  95.       })
  96.     })
  98.     this._subscribers
  99.       .slice() // shallow copy to prevent iterator invalidation if subscriber synchronously calls unsubscribe
  100.       .forEach(sub => sub(mutation, this.state))
  102.     if (
  103.       __DEV__ &&
  104.       options && options.silent
  105.     ) {
  106.       console.warn(
  107.         `[vuex] mutation type: ${type}. Silent option has been removed. ` +
  108.         'Use the filter functionality in the vue-devtools'
  109.       )
  110.     }
  111.   }
  113.   dispatch (_type, _payload) {
  114.     // check object-style dispatch
  115.     const {
  116.       type,
  117.       payload
  118.     } = unifyObjectStyle(_type, _payload)
  120.     const action = { type, payload }
  121.     const entry = this._actions[type]
  122.     if (!entry) {
  123.       if (__DEV__) {
  124.         console.error(`[vuex] unknown action type: ${type}`)
  125.       }
  126.       return
  127.     }
  129.     try {
  130.       this._actionSubscribers
  131.         .slice() // shallow copy to prevent iterator invalidation if subscriber synchronously calls unsubscribe
  132.         .filter(sub => sub.before)
  133.         .forEach(sub => sub.before(action, this.state))
  134.     } catch (e) {
  135.       if (__DEV__) {
  136.         console.warn(`[vuex] error in before action subscribers: `)
  137.         console.error(e)
  138.       }
  139.     }
  141.     const result = entry.length > 1
  142.       ? Promise.all(entry.map(handler => handler(payload)))
  143.       : entry[0](payload)
  145.     return new Promise((resolve, reject) => {
  146.       result.then(res => {
  147.         try {
  148.           this._actionSubscribers
  149.             .filter(sub => sub.after)
  150.             .forEach(sub => sub.after(action, this.state))
  151.         } catch (e) {
  152.           if (__DEV__) {
  153.             console.warn(`[vuex] error in after action subscribers: `)
  154.             console.error(e)
  155.           }
  156.         }
  157.         resolve(res)
  158.       }, error => {
  159.         try {
  160.           this._actionSubscribers
  161.             .filter(sub => sub.error)
  162.             .forEach(sub => sub.error(action, this.state, error))
  163.         } catch (e) {
  164.           if (__DEV__) {
  165.             console.warn(`[vuex] error in error action subscribers: `)
  166.             console.error(e)
  167.           }
  168.         }
  169.         reject(error)
  170.       })
  171.     })
  172.   }
  174.   subscribe (fn, options) {
  175.     return genericSubscribe(fn, this._subscribers, options)
  176.   }
  178.   subscribeAction (fn, options) {
  179.     const subs = typeof fn === 'function' ? { before: fn } : fn
  180.     return genericSubscribe(subs, this._actionSubscribers, options)
  181.   }
  183.   watch (getter, cb, options) {
  184.     if (__DEV__) {
  185.       assert(typeof getter === 'function', `store.watch only accepts a function.`)
  186.     }
  187.     return this._watcherVM.$watch(() => getter(this.state, this.getters), cb, options)
  188.   }
  190.   replaceState (state) {
  191.     this._withCommit(() => {
  192.       this._vm._data.$$state = state
  193.     })
  194.   }
  196.   registerModule (path, rawModule, options = {}) {
  197.     if (typeof path === 'string') path = [path]
  199.     if (__DEV__) {
  200.       assert(Array.isArray(path), `module path must be a string or an Array.`)
  201.       assert(path.length > 0, 'cannot register the root module by using registerModule.')
  202.     }
  204.     this._modules.register(path, rawModule)
  205.     installModule(this, this.state, path, this._modules.get(path), options.preserveState)
  206.     // reset store to update getters...
  207.     resetStoreVM(this, this.state)
  208.   }
  210.   unregisterModule (path) {
  211.     if (typeof path === 'string') path = [path]
  213.     if (__DEV__) {
  214.       assert(Array.isArray(path), `module path must be a string or an Array.`)
  215.     }
  217.     this._modules.unregister(path)
  218.     this._withCommit(() => {
  219.       const parentState = getNestedState(this.state, path.slice(0, -1))
  220.       Vue.delete(parentState, path[path.length - 1])
  221.     })
  222.     resetStore(this)
  223.   }
  225.   hasModule (path) {
  226.     if (typeof path === 'string') path = [path]
  228.     if (__DEV__) {
  229.       assert(Array.isArray(path), `module path must be a string or an Array.`)
  230.     }
  232.     return this._modules.isRegistered(path)
  233.   }
  235.   hotUpdate (newOptions) {
  236.     this._modules.update(newOptions)
  237.     resetStore(this, true)
  238.   }
  240.   _withCommit (fn) {
  241.     const committing = this._committing
  242.     this._committing = true
  243.     fn()
  244.     this._committing = committing
  245.   }
  246. }

把 Store 的实例化过程拆成 3 个部分，分别是初始化模块，安装模块和初始化 store._vm

初始化模块

模块对于 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.     // ModuleCollection实例化的过程就是执行了register方法，三个参数
  5.     // path 表示路径，因为整体目标是要构建一颗模块树，path是在构建树的过程中维护的路径
  6.     // rawModule 表示定义模块的原始配置
  7.     // runtime 表示是否是一个运行时创建的模块
  8.     this.register([], rawRootModule, false)
  9.   }
  11.   // 传入的path是它父模块的path
  12.   get (path) {
  13.     // 从根模块开始，通过reduce方法一层层去找到对应的模块
  14.     // 查找的过程中执行的是module.getChild(key)方法
  15.     return path.reduce((module, key) => {
  16.       return module.getChild(key)
  17.     }, this.root)
  18.   }
  20.   getNamespace (path) {
  21.     let module = this.root
  22.     return path.reduce((namespace, key) => {
  23.       module = module.getChild(key)
  24.       return namespace + (module.namespaced ? key + '/' : '')
  25.     }, '')
  26.   }
  28.   update (rawRootModule) {
  29.     update([], this.root, rawRootModule)
  30.   }
  32.   register (path, rawModule, runtime = true) {
  33.     if (__DEV__) {
  34.       assertRawModule(path, rawModule)
  35.     }
  36.         // 创建一个Module的实例- Module是用来描述单个模块的库
  37.     const newModule = new Module(rawModule, runtime)
  38.     if (path.length === 0) {  // 根模块
  39.       this.root = newModule
  40.     } else {
  41.       // 建立父子关系
  42.       // 根据路径获取到父模块
  43.       const parent = this.get(path.slice(0, -1))
  44.       // 再调用父模块的addChild方法创建父子关系
  45.       parent.addChild(path[path.length - 1], newModule)
  46.     }
  48.     // register nested modules
  49.     if (rawModule.modules) {
  50.       // 遍历当前模块定义中的所有modules，根据key作为path，递归调用register方法
  51.       forEachValue(rawModule.modules, (rawChildModule, key) => {
  52.         this.register(path.concat(key), rawChildModule, runtime)
  53.       })
  54.     }
  55.   }
  57.   unregister (path) {
  58.     const parent = this.get(path.slice(0, -1))
  59.     const key = path[path.length - 1]
  60.     const child = parent.getChild(key)
  62.     if (!child) {
  63.       if (__DEV__) {
  64.         console.warn(
  65.           `[vuex] trying to unregister module '${key}', which is ` +
  66.           `not registered`
  67.         )
  68.       }
  69.       return
  70.     }
  72.     if (!child.runtime) {
  73.       return
  74.     }
  76.     parent.removeChild(key)
  77.   }
  79.   isRegistered (path) {
  80.     const parent = this.get(path.slice(0, -1))
  81.     const key = path[path.length - 1]
  83.     if (parent) {
  84.       return parent.hasChild(key)
  85.     }
  87.     return false
  88.   }
  89. }

Module是用来描述单个模块的库，它的定义在 src/module/module.js 中

  1. // Base data struct for store's module, package with some attribute and method
  2. export default class Module {
  3.   constructor (rawModule, runtime) {
  4.     this.runtime = runtime
  5.     // Store some children item
  6.     // 所有子模块
  7.     this._children = Object.create(null)
  8.     // Store the origin module object which passed by programmer
  9.     // 模块的配置
  10.     this._rawModule = rawModule
  11.     const rawState = rawModule.state
  13.     // Store the origin module's state
  14.     // 该模块定义的state
  15.     this.state = (typeof rawState === 'function' ? rawState() : rawState) || {}
  16.   }
  18.   get namespaced () {
  19.     return !!this._rawModule.namespaced
  20.   }
  22.   addChild (key, module) {
  23.     this._children[key] = module
  24.   }
  26.   removeChild (key) {
  27.     delete this._children[key]
  28.   }
  30.   getChild (key) {
  31.     // 返回当前模块的_children中对应key的模块
  32.     return this._children[key]
  33.   }
  35.   hasChild (key) {
  36.     return key in this._children
  37.   }
  39.   update (rawModule) {
  40.     this._rawModule.namespaced = rawModule.namespaced
  41.     if (rawModule.actions) {
  42.       this._rawModule.actions = rawModule.actions
  43.     }
  44.     if (rawModule.mutations) {
  45.       this._rawModule.mutations = rawModule.mutations
  46.     }
  47.     if (rawModule.getters) {
  48.       this._rawModule.getters = rawModule.getters
  49.     }
  50.   }
  52.   forEachChild (fn) {
  53.     forEachValue(this._children, fn)
  54.   }
  56.   forEachGetter (fn) {
  57.     if (this._rawModule.getters) {
  58.       forEachValue(this._rawModule.getters, fn)
  59.     }
  60.   }
  62.   forEachAction (fn) {
  63.     if (this._rawModule.actions) {
  64.       forEachValue(this._rawModule.actions, fn)
  65.     }
  66.   }
  68.   forEachMutation (fn) {
  69.     if (this._rawModule.mutations) {
  70.       forEachValue(this._rawModule.mutations, fn)
  71.     }
  72.   }
  73. }

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

安装模块

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

  1. const state = this._modules.root.state
  3. // init root module.
  4. // this also recursively registers all sub-modules
  5. // and collects all module getters inside this._wrappedGetters
  6. installModule(this, state, [], this._modules.root)

installModule的定义

  1. // store表示root store
  2. // state表示root state
  3. // path表示模块的访问路径
  4. // module表示当前的模块
  5. // hot表示是否是热更新
  6. function installModule (store, rootState, path, module, hot) {
  7.   const isRoot = !path.length
  8.   // 根据path获取namespace
  9.   const namespace = store._modules.getNamespace(path)
  11.   // register in namespace map
  12.   if (module.namespaced) {
  13.     if (store._modulesNamespaceMap[namespace] && __DEV__) {
  14.       console.error(`[vuex] duplicate namespace ${namespace} for the namespaced module ${path.join('/')}`)
  15.     }
  16.     // 把namespace对应的模块保存下来，方便以后能根据namespace查找模块
  17.     store._modulesNamespaceMap[namespace] = module
  18.   }
  20.   // set state
  21.   // 非root module下的state初始化逻辑
  22.   if (!isRoot && !hot) {
  23.     // getNestedState方法是从root state开始，一层层根据模块名能访问到对应path的state，那么它每一层关系的建立实际上就是通过这段state的初始化逻辑
  24.     const parentState = getNestedState(rootState, path.slice(0, -1))
  25.     const moduleName = path[path.length - 1]
  26.     store._withCommit(() => {
  27.       if (__DEV__) {
  28.         if (moduleName in parentState) {
  29.           console.warn(
  30.             `[vuex] state field "${moduleName}" was overridden by a module with the same name at "${path.join('.')}"`
  31.           )
  32.         }
  33.       }
  34.       Vue.set(parentState, moduleName, module.state)
  35.     })
  36.   }
  37.     // 构建一个本地上下文环境
  38.   const local = module.context = makeLocalContext(store, namespace, path)
  40.   // 遍历模块中定义的mutation、action、getter，分别执行注册工作
  42.   // 遍历模块中的mutations的定义，拿到每一个mutation和 key，并把key拼接上 namespace，然后执行registerMutation方法
  43.   module.forEachMutation((mutation, key) => {
  44.     const namespacedType = namespace + key
  45.     registerMutation(store, namespacedType, mutation, local)
  46.   })
  48.   // 遍历模块中的actions的定义，拿到每一个action和key，并判断action.root，如果否的情况把key拼接上namespace，然后执行registerAction方法
  49.   module.forEachAction((action, key) => {
  50.     const type = action.root ? key : namespace + key
  51.     const handler = action.handler || action
  52.     registerAction(store, type, handler, local)
  53.   })
  55.   // 遍历模块中的getters的定义，拿到每一个getter和key，并把key拼接上namespace，然后执行registerGetter方法
  56.   module.forEachGetter((getter, key) => {
  57.     const namespacedType = namespace + key
  58.     registerGetter(store, namespacedType, getter, local)
  59.   })
  61.   // 遍历模块中的所有子modules，递归执行installModule方法
  62.   module.forEachChild((child, key) => {
  63.     installModule(store, rootState, path.concat(key), child, hot)
  64.   })
  65. }

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

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

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

  1. getNamespace (path) {
  2.   // 从root module开始通过reduce方法一层层找子模块，如果发现该模块配置了namespaced为true，则把该模块的key拼到namespace中，最终返回完整的namespace字符串
  3.   let module = this.root
  4.   return path.reduce((namespace, key) => {
  5.     module = module.getChild(key)
  6.     return namespace + (module.namespaced ? key + '/' : '')
  7.   }, '')
  8. }

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

  1. // store表示root store
  2. // namespace表示模块的命名空间
  3. // path表示模块的path
  4. function makeLocalContext (store, namespace, path) {
  5.   const noNamespace = namespace === ''
  7.   const local = {
  8.     dispatch: noNamespace ? store.dispatch : (_type, _payload, _options) => {
  9.       const args = unifyObjectStyle(_type, _payload, _options)
  10.       const { payload, options } = args
  11.       let { type } = args
  13.       if (!options || !options.root) {
  14.         type = namespace + type
  15.         if (__DEV__ && !store._actions[type]) {
  16.           console.error(`[vuex] unknown local action type: ${args.type}, global type: ${type}`)
  17.           return
  18.         }
  19.       }
  21.       return store.dispatch(type, payload)
  22.     },
  24.     commit: noNamespace ? store.commit : (_type, _payload, _options) => {
  25.       const args = unifyObjectStyle(_type, _payload, _options)
  26.       const { payload, options } = args
  27.       let { type } = args
  29.       if (!options || !options.root) {
  30.         type = namespace + type
  31.         if (__DEV__ && !store._mutations[type]) {
  32.           console.error(`[vuex] unknown local mutation type: ${args.type}, global type: ${type}`)
  33.           return
  34.         }
  35.       }
  37.       store.commit(type, payload, options)
  38.     }
  39.   }
  41.   // getters and state object must be gotten lazily
  42.   // because they will be changed by vm update
  43.   Object.defineProperties(local, {
  44.     // getters 如果没有namespace直接返回root store的getters，否则返回makeLocalGetters方法的返回值
  45.     getters: {
  46.       get: noNamespace
  47.         ? () => store.getters
  48.         : () => makeLocalGetters(store, namespace)
  49.     },
  50.     // states 获取是通过getNestedState方法
  51.     state: {
  52.       get: () => getNestedState(store.state, path)
  53.     }
  54.   })
  56.   return local
  57. }

makeLocalGetters

  1. function makeLocalGetters (store, namespace) {
  2.   if (!store._makeLocalGettersCache[namespace]) {
  3.     const gettersProxy = {}
  4.     // 获取了namespace的长度
  5.     const splitPos = namespace.length
  6.     // 遍历root store下所有的getters
  7.     Object.keys(store.getters).forEach(type => {
  8.       // skip if the target getter is not match this namespace
  9.       // 先判断它的类型的是否匹配到namespace
  10.       if (type.slice(0, splitPos) !== namespace) return
  12.       // extract local getter type
  13.       // 匹配到后从namespace的位置截取后面的字符串得到localType
  14.       const localType = type.slice(splitPos)
  16.       // Add a port to the getters proxy.
  17.       // Define as getter property because
  18.       // we do not want to evaluate the getters in this time.
  19.       // 定义了gettersProxy，获取localType实际上是访问了store.getters[type]
  20.       Object.defineProperty(gettersProxy, localType, {
  21.         get: () => store.getters[type],
  22.         enumerable: true
  23.       })
  24.     })
  25.     store._makeLocalGettersCache[namespace] = gettersProxy
  26.   }
  28.   return store._makeLocalGettersCache[namespace]
  29. }

getNestedState

  1. function getNestedState (state, path) {
  2.   // 从root state开始通过path.reduce方法一层层查找子模块state，最终找到目标模块的state
  3.   return path.reduce((state, key) => state[key], state)
  4. }

registerMutation
同一type的_mutations可以对应多个方法

  1. // 给root store上的_mutations[types]添加wrappedMutationHandler方法
  2. function registerMutation (store, type, handler, local) {
  3.   const entry = store._mutations[type] || (store._mutations[type] = [])
  4.   entry.push(function wrappedMutationHandler (payload) {
  5.     handler.call(store, local.state, payload)
  6.   })
  7. }

registerAction
同一type的_actions可以对应多个方法

  1. // 给root store上的_actions[types]添加wrappedActionHandler方法
  2. function registerAction (store, type, handler, local) {
  3.   const entry = store._actions[type] || (store._actions[type] = [])
  4.   entry.push(function wrappedActionHandler (payload) {
  5.     let res = handler.call(store, {
  6.       dispatch: local.dispatch,
  7.       commit: local.commit,
  8.       getters: local.getters,
  9.       state: local.state,
  10.       rootGetters: store.getters,
  11.       rootState: store.state
  12.     }, payload)
  13.     if (!isPromise(res)) {
  14.       res = Promise.resolve(res)
  15.     }
  16.     if (store._devtoolHook) {
  17.       return res.catch(err => {
  18.         store._devtoolHook.emit('vuex:error', err)
  19.         throw err
  20.       })
  21.     } else {
  22.       return res
  23.     }
  24.   })
  25. }

registerGetter
同一 type 的_wrappedGetters只能定义一个

  1. // root store上的_wrappedGetters[key]指定wrappedGetter方法
  2. function registerGetter (store, type, rawGetter, local) {
  3.   if (store._wrappedGetters[type]) {
  4.     if (__DEV__) {
  5.       console.error(`[vuex] duplicate getter key: ${type}`)
  6.     }
  7.     return
  8.   }
  9.   store._wrappedGetters[type] = function wrappedGetter (store) {
  10.     return rawGetter(
  11.       local.state, // local state
  12.       local.getters, // local getters
  13.       store.state, // root state
  14.       store.getters // root getters
  15.     )
  16.   }
  17. }

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

初始化 store._vm

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

  1. // initialize the store vm, which is responsible for the reactivity
  2. // (also registers _wrappedGetters as computed properties)
  3. resetStoreVM(this, state)

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

  1. function resetStoreVM (store, state, hot) {
  2.   const oldVm = store._vm
  4.   // bind store public getters
  5.   store.getters = {}
  6.   // reset local getters cache
  7.   store._makeLocalGettersCache = Object.create(null)
  8.   const wrappedGetters = store._wrappedGetters
  9.   const computed = {}
  10.   // 遍历了wrappedGetters获得每个getter的函数fn和key
  11.   forEachValue(wrappedGetters, (fn, key) => {
  12.     // use computed to leverage its lazy-caching mechanism
  13.     // direct inline function use will lead to closure preserving oldVm.
  14.     // using partial to return function with only arguments preserved in closure environment.
  15.     // partial(fn, store)使用匿名函数去执行fn(store)
  16.     computed[key] = partial(fn, store)
  17.     Object.defineProperty(store.getters, key, {
  18.       get: () => store._vm[key],
  19.       enumerable: true // for local getters
  20.     })
  21.   })
  23.   // use a Vue instance to store the state tree
  24.   // suppress warnings just in case the user has added
  25.   // some funky global mixins
  26.   const silent = Vue.config.silent
  27.   Vue.config.silent = true
  28.   // 实例化一个Vue实例store._vm，并把computed传入
  29.   store._vm = new Vue({
  30.     data: {
  31.       $$state: state // 访问store.state时实际上会访问Store类上定义的state的get方法
  32.     },
  33.     computed
  34.   })
  35.   Vue.config.silent = silent
  37.   // enable strict mode for new vm
  38.   // 严格模式下
  39.   if (store.strict) {
  40.     enableStrictMode(store)
  41.   }
  43.   if (oldVm) {
  44.     if (hot) {
  45.       // dispatch changes in all subscribed watchers
  46.       // to force getter re-evaluation for hot reloading.
  47.       store._withCommit(() => {
  48.         oldVm._data.$$state = null
  49.       })
  50.     }
  51.     Vue.nextTick(() => oldVm.$destroy())
  52.   }
  53. }

partial

  1. export function partial (fn, arg) {
  2.   return function () {
  3.     return fn(arg)
  4.   }
  5. }
  7. // fn(store)相当于执行
  8. store._wrappedGetters[type] = function wrappedGetter (store) {
  9.   return rawGetter(
  10.     local.state, // local state
  11.     local.getters, // local getters
  12.     store.state, // root state
  13.     store.getters // root getters
  14.   )
  15. }

返回的就是 rawGetter 的执行函数，rawGetter 就是用户定义的 getter 函数
Store类上定义的state的get方法

  1. get state () {
  2.   return this._vm._data.$$state // 实际上访问了store._vm._data.$$state
  3. }

getters 和 state 是如何建立依赖逻辑的呢

  1. forEachValue(wrappedGetters, (fn, key) => {
  2.   // use computed to leverage its lazy-caching mechanism
  3.   // direct inline function use will lead to closure preserving oldVm.
  4.   // using partial to return function with only arguments preserved in closure environment.
  5.   computed[key] = partial(fn, store)
  6.   Object.defineProperty(store.getters, key, {
  7.     get: () => store._vm[key],
  8.     enumerable: true // for local getters
  9.   })
  10. })

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

  1. function enableStrictMode (store) {
  2.   store._vm.$watch(function () { return this._data.$$state }, () => {
  3.     if (__DEV__) {
  4.       assert(store._committing, `do not mutate vuex store state outside mutation handlers.`)
  5.     }
  6.   }, { deep: true, sync: true })
  7. }

当严格模式下，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