分析开始

以官网的例子，来分析vuex的源码，首先从引入开始。

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  4. Vue.use(Vuex)
  6. const store = new Vuex.Store({
  7.   state: {
  8.     count: 0
  9.   },
  10.   mutations: {
  11.     increment (state) {
  12.       state.count++
  13.     }
  14.   }
  15. })

以上用的是标准的Vue 插件模式，所以很容易推测Vuex会有一个install的值，下面就是对vuex源码的具体解析，vuex源码地址 链接。

vuex/src/index.js 文件如下，他导出了我们熟悉的Store, install, mapState, mapGetters, mapMutations, mapActions。

  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. }
  17. export {
  18.   Store,
  19.   install,
  20.   mapState,
  21.   mapMutations,
  22.   mapGetters,
  23.   mapActions,
  24.   createNamespacedHelpers,
  25.   createLogger
  26. }

install

我们先从导出的install函数看起（下面提到的Vue只是一个变量，不是我们引入的vue）

vue/src/store.js 该文件重要的只有两句话（直接忽略掉__DEV相关的判断，看主干内容）

  1. （14）将传入的_vue赋值给 Vue 参数
  2. （15）applyMixin(Vue) 给Vue Mixin一些内容（继续后面内容） ```javascript let Vue

// … … 展示省略中间的很多内容，只保留当前相关的内容

export function install (Vue) { if (Vue && Vue === Vue) { if (__DEV) { console.error( ‘[vuex] already installed. Vue.use(Vuex) should be called only once.’ ) } return } Vue = _Vue applyMixin(Vue) }

  1. **vuex/src/mixins.js**（上面提到的applyMixin函数）下面代码可以看出，vuex针对不同的vue版本进行了处理：
  3. - vue的版本≥2时（4-5），是通过mixin混入beforeCreate钩子，将vuex初始化进来的
  4. - vue的版本<2时（9-14），是透过Vue的原型链，将vuex初始化进来的
  5. ```javascript
  6. export default function (Vue) {
  7.   const version = Number(Vue.version.split('.')[0])
  9.   if (version >= 2) {
  10.     Vue.mixin({ beforeCreate: vuexInit })
  11.   } else {
  12.     // override init and inject vuex init procedure
  13.     // for 1.x backwards compatibility.
  14.     const _init = Vue.prototype._init
  15.     Vue.prototype._init = function (options = {}) {
  16.       options.init = options.init
  17.         ? [vuexInit].concat(options.init)
  18.         : vuexInit
  19.       _init.call(this, options)
  20.     }
  21.   }

具体我们也可以看到（9-11），我们是将options.store挂到了vue实例的this.$store身上。

  1.   /**
  2.    * Vuex init hook, injected into each instances init hooks list.
  3.    */
  5.   function vuexInit () {
  6.     const options = this.$options
  7.     // store injection
  8.     if (options.store) {
  9.       this.$store = typeof options.store === 'function'
  10.         ? options.store()
  11.         : options.store
  12.     } else if (options.parent && options.parent.$store) {
  13.       this.$store = options.parent.$store
  14.     }
  15.   }
  16. }

所以在实例化vue的时候，我们会把之前定义的store作为参数引入进来（即options.store），所以在vue初始化的时候，vuex也就通过插件模式融入进vue实例了。

  1. new Vue({
  2.   el: '#app',
  3.   store: store,
  4. })

Store

接下来我们主要研究下vuex内部的一些处理机制。

先从我们对store的初始化开始，最开始官网的例子，我们通过new Vuex.Store实例化了一个根store。

  1. const store = new Vuex.Store({
  2.   state: {
  3.     count: 0
  4.   },
  5.   mutations: {
  6.     increment (state) {
  7.       state.count++
  8.     }
  9.   }
  10. })

紧接着就是进入vuex/src/store.js内看一下new实例时，都做了一些什么。

内容非常多，我们同样是看主干内容，在构造函数（constructor）中：

  1. （8-9）首先检查Vue（此处是自己定义的变量Vue）是否存在，如果Vue变量为“空”，且window对象中有引入Vue（此处的为window.Vue）时，就会通过插件模式将vuex初始化的内容挂载到beforeCreate钩子上（上一章的内容install）。

  2. （24-33）初始化了一些store内的参数

    1. （29）**this._modules = new ModuleCollection(options)** 实例化了modules（请 先 看 下一章ModuleCollection），此处其实就是初始化了各个模块（根模块、子模块）
    2. （32）this._watcherVM为一个实例化的Vue

  3. （38-43）初始化了dispatch和commit函数

  4. （53）**installModule(this, state, [], this._modules.root)**（重点，详见后面）

  5. （57）**resetStoreVM(this, state)**（重点，详见后面）

  6. （60）plugins.forEach(plugin => plugin(this)) 执行 options.plugins里的内容（此例子中plugins为空，先不管）

  7. （62-65）与devTool有关，暂时忽略（不是重点） ```javascript let Vue

export class Store { constructor (options = {}) { // Auto install if it is not done yet and window has Vue. // To allow users to avoid auto-installation in some cases, // this code should be placed here. See #731 if (!Vue && typeof window !== ‘undefined’ && window.Vue) { install(window.Vue) }

  1. if (__DEV__) {
  2.   assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`)
  3.   assert(typeof Promise !== 'undefined', `vuex requires a Promise polyfill in this browser.`)
  4.   assert(this instanceof Store, `store must be called with the new operator.`)
  5. }
  7. const {
  8.   plugins = [],
  9.   strict = false
  10. } = options
  12. // store internal state
  13. this._committing = false
  14. this._actions = Object.create(null)
  15. this._actionSubscribers = []
  16. this._mutations = Object.create(null)
  17. this._wrappedGetters = Object.create(null)
  18. this._modules = new ModuleCollection(options)
  19. this._modulesNamespaceMap = Object.create(null)
  20. this._subscribers = []
  21. this._watcherVM = new Vue()
  22. this._makeLocalGettersCache = Object.create(null)
  24. // bind commit and dispatch to self
  25. const store = this
  26. const { dispatch, commit } = this
  27. this.dispatch = function boundDispatch (type, payload) {
  28.   return dispatch.call(store, type, payload)
  29. }
  30. this.commit = function boundCommit (type, payload, options) {
  31.   return commit.call(store, type, payload, options)
  32. }
  34. // strict mode
  35. this.strict = strict
  37. const state = this._modules.root.state
  39. // init root module.
  40. // this also recursively registers all sub-modules
  41. // and collects all module getters inside this._wrappedGetters
  42. installModule(this, state, [], this._modules.root)
  44. // initialize the store vm, which is responsible for the reactivity
  45. // (also registers _wrappedGetters as computed properties)
  46. resetStoreVM(this, state)
  48. // apply plugins
  49. plugins.forEach(plugin => plugin(this))
  51. const useDevtools = options.devtools !== undefined ? options.devtools : Vue.config.devtools
  52. if (useDevtools) {
  53.   devtoolPlugin(this)
  54. }

}

// … … 展示省略中间的很多内容，只保留当前相关的内容 }

  1. <a name="rC82j"></a>
  2. ## installModule
  3. 如函数名所言，此处是对各个模块的“安装”、“设置”，我们把上面的主要相关的代码拿下来分析：
  4. ```javascript
  5. const state = this._modules.root.state
  7. installModule(this, state, [], this._modules.root)
  1. 首先得到state的值 （我们在Module章节已经分析过了 为{count: 0 }）
  2. 我们将例子中的参数带进去看后，如下
    1. installModule(
    2. this,         // 第一个参数，对应下面的 store
    3. { count: 0 }, // 第二个参数，对应下面的 rootState
    4. [],           // 第三个参数，对应下面的 path
    5. module类实例  // 第四个参数，对应下面的 module
    6. )
    vuex/src/store.js
  • （2）isRoot用来判断是否为根模块（此例子![].length = true，isRoot为true）
  • （3）获取当前模块的命名空间值namespace，此处为根模块，所以命名空间值为''（初始值）。
  • （6-11）如果当前模块存在命名空间，则在store的_modulesNamespaceMap中以key-value的形式记录下来
  • （14-27）主要是为非根模块设置state值（暂时忽略）

  • （29-49）这里就是重头戏了，为模块注册mutation，action，getter和组装子模块的内容（继续往下看即可）

    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.   if (store._modulesNamespaceMap[namespace] && __DEV__) {
    8.     console.error(`[vuex] duplicate namespace ${namespace} for the namespaced module ${path.join('/')}`)
    9.   }
    10.   store._modulesNamespaceMap[namespace] = module
    11. }
    13. // set state
    14. if (!isRoot && !hot) {
    15.   const parentState = getNestedState(rootState, path.slice(0, -1))
    16.   const moduleName = path[path.length - 1]
    17.   store._withCommit(() => {
    18.     if (__DEV__) {
    19.       if (moduleName in parentState) {
    20.         console.warn(
    21.           `[vuex] state field "${moduleName}" was overridden by a module with the same name at "${path.join('.')}"`
    22.         )
    23.       }
    24.     }
    25.     Vue.set(parentState, moduleName, module.state)
    26.   })
    27. }
    29. const local = module.context = makeLocalContext(store, namespace, path)
    31. module.forEachMutation((mutation, key) => {
    32.   const namespacedType = namespace + key
    33.   registerMutation(store, namespacedType, mutation, local)
    34. })
    36. module.forEachAction((action, key) => {
    37.   const type = action.root ? key : namespace + key
    38.   const handler = action.handler || action
    39.   registerAction(store, type, handler, local)
    40. })
    42. module.forEachGetter((getter, key) => {
    43.   const namespacedType = namespace + key
    44.   registerGetter(store, namespacedType, getter, local)
    45. })
    47. module.forEachChild((child, key) => {
    48.   installModule(store, rootState, path.concat(key), child, hot)
    49. })
    50. }

    local

    我们看看local是什么？

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

    从代码里看，这里的local是一个包含dispatch、commit、getters和state这些键的key-value对象。

vue/src/store.js
由于我们是根模块，noNamespace为true，所以我们只考虑true的情况，所以这里获取到的local对象的dispatch、commit、getters、state的值都为store对应的值，所以local.state= { count: 0 }

  1. function makeLocalContext (store, namespace, path) {
  2.   const noNamespace = namespace === ''
  4.   const local = {
  5.     dispatch: noNamespace ? store.dispatch : (_type, _payload, _options) => {
  6.         // ... ... 展示省略中间的很多内容，只保留当前相关的内容
  7.     },
  9.     commit: noNamespace ? store.commit : (_type, _payload, _options) => {
  10.         // ... ... 展示省略中间的很多内容，只保留当前相关的内容
  11.     }
  12.   }
  14.   // getters and state object must be gotten lazily
  15.   // because they will be changed by vm update
  16.   Object.defineProperties(local, {
  17.     getters: {
  18.       get: noNamespace
  19.         ? () => store.getters
  20.         : () => makeLocalGetters(store, namespace)
  21.     },
  22.     state: {
  23.       get: () => getNestedState(store.state, path)
  24.     }
  25.   })
  27.   return local
  28. }

registerMutation

由于我们的例子只有mutation，后面我就先深入module.forEachMutation来叙述：

  1. module.forEachMutation((mutation, key) => {
  2.   const namespacedType = namespace + key
  3.   registerMutation(store, namespacedType, mutation, local)
  4. })

先看module.forEachMutation，此处的module是之前提到的module类的实例，forEachMutation参数中的fn则对应此处的 (mutation, key)=>{const namespacedType = namespace + key ... }
image.png
将所有参数带进去后，内容如下

  • 根据（24-33）我们可以看出store._mutations是一个对象，他会按（8）forEach的index值，初始化一个array数组，然后把对应的mutation封装在函数wrappedMutationHandler内后push进去。

vue/src/store.js

  1. forEachMutation () {
  2.   const mutations = {
  3.     increment: function (state) { state.count++ }
  4.   }
  6.   Object.keys(mutations).forEach((key) => {
  8.       (mutations[key], index) => {
  10.       const namespacedType = namespace + index
  12.       (store, namespacedType, mutation=mutations[key], local)=>{
  13.             const entry = store._mutations[namespacedType] || (store._mutations[namespacedType] = [])
  14.           entry.push(function wrappedMutationHandler (payload) {
  15.             mutation.call(store, local.state, payload)
  16.           })
  17.       }()
  19.     }
  20.   })
  21. }
  24.     /*
  25.         (10-17)带入参数后如下
  27.       const namespacedType = '0'
  28.       const entry = store._mutations[namespacedType] = []
  29.       entry.push(function wrappedMutationHandler (payload) {
  30.         mutations['increment'].call(store, local.state, payload)
  31.       })
  33.     */

即最后store._mutations的值为：

  1. store._mutations = {
  2.     0: [function wrappedMutationHandler (payload) {
  3.         mutations['increment'].call(store, local.state, payload)
  4.   })],
  5. }

registerGetter（待完善）

vue/src/store.js

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

registerAction（待完善）

vue/src/store.js

  1. function registerGetter (store, type, rawGetter, local) {
  2.   if (store._wrappedGetters[type]) {
  3.     if (__DEV__) {
  4.       console.error(`[vuex] duplicate getter key: ${type}`)
  5.     }
  6.     return
  7.   }
  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.   }
  16. }

resetStoreVM

上面的步骤中我们已经将module初始化完成，并且组装好了module（根模块和子模块）和其内的getters、mutations和actions，接下来我们看看resetStoreVM都做了些什么。

  1. resetStoreVM(this, state)

vue/src/store.js

  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.   forEachValue(wrappedGetters, (fn, key) => {
  11.     // use computed to leverage its lazy-caching mechanism
  12.     // direct inline function use will lead to closure preserving oldVm.
  13.     // using partial to return function with only arguments preserved in closure environment.
  14.     computed[key] = partial(fn, store)
  15.     Object.defineProperty(store.getters, key, {
  16.       get: () => store._vm[key],
  17.       enumerable: true // for local getters
  18.     })
  19.   })
  21.   // use a Vue instance to store the state tree
  22.   // suppress warnings just in case the user has added
  23.   // some funky global mixins
  24.   const silent = Vue.config.silent
  25.   Vue.config.silent = true
  26.   store._vm = new Vue({
  27.     data: {
  28.       $$state: state
  29.     },
  30.     computed
  31.   })
  32.   Vue.config.silent = silent
  34.   // enable strict mode for new vm
  35.   if (store.strict) {
  36.     enableStrictMode(store)
  37.   }
  39.   if (oldVm) {
  40.     if (hot) {
  41.       // dispatch changes in all subscribed watchers
  42.       // to force getter re-evaluation for hot reloading.
  43.       store._withCommit(() => {
  44.         oldVm._data.$$state = null
  45.       })
  46.     }
  47.     Vue.nextTick(() => oldVm.$destroy())
  48.   }
  49. }

ModuleCollection

在实例化store的时候，我们注意到store中的_this.modules是ModuleCollection的实例化，通过名字我们很容易猜测到这里和模块有什么关系，也许模块、命名空间相关的内容我们都可以在这里找到。

  1. this._modules = new ModuleCollection(options)

主要内容

  • 实例化的第一步自然是走constrcutor的过程，这里执行了（4）this.register([], rawRootModule, false)

  • 深入到（15-34）的register函数，我们可以把参数具体化了看

    1. this.register(
    2. [], // 第一个参数，对应下面的path
    3. {   // 第二个参数，对应下面的rawModule
    4.   state: {
    5.     count: 0
    6.   },
    7.   mutations: {
    8.     increment (state) {
    9.       state.count++
    10.     }
    11.   }
    12. }, // 即后面的rawModule对象
    13. false // 第三个参数，对应下面的runtime
    14. )

  • （20）const newModule = new Module(rawModule, true) 这里是将Module实例化了，这里涉及到了Module类（后面有图解ModuleCollection和Module的关系图）

  • （21）满足条件[].length === 0所以当前module-collection实例（也就是上面的this._modules）的root值就为这里的newModule了
  • （29-33）由于官方的例子没有子模块（即没有rawModule.modules），所以这里的内容就可以忽略了，其实这里就是注册（遍历）子模块，过程与根模块类似。

vuex/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.   // ... ... 展示省略中间的很多内容，只保留当前相关的内容
  15.   register (path, rawModule, runtime = true) {
  16.     if (__DEV__) {
  17.       assertRawModule(path, rawModule)
  18.     }
  20.     const newModule = new Module(rawModule, runtime)
  21.     if (path.length === 0) {
  22.       this.root = newModule
  23.     } else {
  24.       const parent = this.get(path.slice(0, -1))
  25.       parent.addChild(path[path.length - 1], newModule)
  26.     }
  28.     // register nested modules
  29.     if (rawModule.modules) {
  30.       forEachValue(rawModule.modules, (rawChildModule, key) => {
  31.         this.register(path.concat(key), rawChildModule, runtime)
  32.       })
  33.     }
  34.   }
  36.   // ... ... 展示省略中间的很多内容，只保留当前相关的内容
  38. }

获取命名空间值

vuex/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.   }

Module

这里用图片表示一下ModuleCollection和Module的联系：
image.png

  1. /*
  2.     此处传递的 rawModule 值为
  3.   {
  4.     state: {
  5.       count: 0
  6.     },
  7.     mutations: {
  8.       increment (state) {
  9.         state.count++
  10.       }
  11.     }
  12.   }
  13. */
  14. const newModule = new Module(rawModule, runtime)

vuex/src/module/module.js 如下，

  • （11）所以此处newModule.state的值为{count: 0 }
  • （10）this._rawModule的值为{ state: {count: 0}, mutation: {...} } ```javascript import { forEachValue } from ‘../util’

// Base data struct for store’s module, package with some attribute and method export default class Module { constructor (rawModule, runtime) { this.runtime = runtime // Store some children item this._children = Object.create(null) // Store the origin module object which passed by programmer this._rawModule = rawModule const rawState = rawModule.state

  1. // Store the origin module's state
  2. this.state = (typeof rawState === 'function' ? rawState() : rawState) || {}

}

// … … 展示省略中间的很多内容，只保留当前相关的内容

}

```