VUEX源码阅读理解

向右看齐 2022-12-01 12:25 208阅读 0赞

由于文章中有大量源码，所以篇幅较长，但我感觉还是比较详细的。

## **1. Vuex注册** ##

let Vue
    function install (_Vue) { 
      Vue = _Vue
      applyMixin(Vue)
    }

首先定义一个全局变量Vue用于存储传入的Vue，这样可以不使用`import Vue from 'vue'`的形式引入Vue，这也是为什么实例化前要先使用`Vue.use()`。然后调用`applyMixin(Vue)`调用一个全局混入

// applyMixin
    export default function (Vue) { 
      const version = Number(Vue.version.split('.')[0])
    
      if (version >= 2) { 
        Vue.mixin({  beforeCreate: vuexInit })
      } else { 
        const _init = Vue.prototype._init
        Vue.prototype._init = function (options = { }) { 
          options.init = options.init
            ? [vuexInit].concat(options.init)
            : vuexInit
          _init.call(this, options)
        }
      }
    
      function vuexInit () { 
        const options = this.$options
        // store injection
        if (options.store) { 
          this.$store = typeof options.store === 'function'
            ? options.store()
            : options.store
        } else if (options.parent && options.parent.$store) { 
          this.$store = options.parent.$store
        }
      }
    }

这里会根据Vue的不同版本做适配，但主要就是会在初始化时调用`vuexInit`，将上级节点的`$store`或根节点的`store`实例添加到当前组件实例的`$store`上

## **2. Vuex实例化** ##

首先看一下Store的构造函数

constructor (options = { }) { 
      if (!Vue && typeof window !== 'undefined' && window.Vue) { 
        install(window.Vue)
      }
    
      const { 
        plugins = [],
        strict = false
      } = options
    
      // 提交状态标记，用于判断是否从mutation修改的state
      this._committing = false
      // 存储包装后的所有action
      this._actions = Object.create(null)
      this._actionSubscribers = []
      // 存储包装后的所有mutation
      this._mutations = Object.create(null)
      // 存储包装后的所有getter
      this._wrappedGetters = Object.create(null)
     // 存储一棵module树
      this._modules = new ModuleCollection(options)
      // 根据namespace存储module
      this._modulesNamespaceMap = Object.create(null)
      this._subscribers = []
      this._watcherVM = new Vue()
      this._makeLocalGettersCache = Object.create(null)
    
      // bind commit and dispatch to self
      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)
      }
    
      // strict mode
      this.strict = strict
    
      const state = this._modules.root.state
    
      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)
      }
    }

可以看到构造函数中首先初始化了一堆私有变量，其中主要是`this._modules = new ModuleCollection(options)`，这里会根据options生成一棵module树

#### **2.1 Module树构建** ####

// ModuleCollection
    constructor (rawRootModule) { 
      this.register([], rawRootModule, false)
    }
    
    register (path, rawModule, runtime = true) { 
      const newModule = new Module(rawModule, runtime)
      if (path.length === 0) { 
        this.root = newModule
      } else { 
        const parent = this.get(path.slice(0, -1))
        parent.addChild(path[path.length - 1], newModule)
      }
    
      // register nested modules
      if (rawModule.modules) { 
        forEachValue(rawModule.modules, (rawChildModule, key) => { 
          this.register(path.concat(key), rawChildModule, runtime)
        })
      }
    }

在`ModuleCollection`的构造函数中调用了类中的`register`方法。`register`方法中首先生成了一个`Module`实例，并根据`path`将实例赋给`root`还是调用父`Module`实例的`addChild`方法添加到子节点。如果用户传入的配置有`modules`，则递归调用`register`方法，最终生成`Module`树。

// Module类的构造函数
    constructor (rawModule, runtime) { 
      this.runtime = runtime
      this._children = Object.create(null)
      this._rawModule = rawModule
      const rawState = rawModule.state
    
      this.state = (typeof rawState === 'function' ? rawState() : rawState) || { }
    }

`Module类`主要维护相关模块，类的构造函数中主要是初始化或缓存一些值，其中`_children`变量就是树形成的关键，用于存储子节点。其它类的方法，包括了对子节点的管理、遍历getters、actions和mutations等操作。

#### **2.2 更改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)
    }

主要的作用是将`dispatch`和`commit`的上下文指向Store的实例，避免了非常规操作导致出错

#### **2.3 安装模块** ####

接着构造函数调用`installModule`方法安装递归遍历安装模块，这里是VUEX的核心部分。主要做的就是按module树构建state树，然后按配置递归遍历所有module，将相应的getter、mutation、action等封装处理后按namespace放入实例的对应变量中，以方便后续调用。

installModule(this, state, [], this._modules.root)

function installModule (store, rootState, path, module, hot) { 
      const isRoot = !path.length
      // 根据path加上module树获取命名字符串，用'/'分隔
      // 需要有子module的namespaced为true，否则是空字符串
      const namespace = store._modules.getNamespace(path)
    
      // register in namespace map
      if (module.namespaced) { 
        if (store._modulesNamespaceMap[namespace] && __DEV__) { 
          console.error(`[vuex] duplicate namespace ${ namespace} for the namespaced module ${ path.join('/')}`)
        }
        store._modulesNamespaceMap[namespace] = module
      }
    
      // set state
      // 这里会将子State使用Vue.set形式加入到父State，最终形成State树
      if (!isRoot && !hot) { 
        // 父级的state
        const parentState = getNestedState(rootState, path.slice(0, -1))
        const moduleName = path[path.length - 1]
        // 在_withCommit中调用主要是修改标记_committing
        store._withCommit(() => { 
          if (__DEV__) { 
            if (moduleName in parentState) { 
              console.warn(
                `[vuex] state field "${ moduleName}" was overridden by a module with the same name at "${ path.join('.')}"`
              )
            }
          }
          // 将当前module的State添加到父State中，并使其是响应式
          Vue.set(parentState, moduleName, module.state)
        })
      }
    
      // 创建一个包含dispatch、commit、getter、state的当前module的上下文
      const local = module.context = makeLocalContext(store, namespace, path)
    
      module.forEachMutation((mutation, key) => { 
        const namespacedType = namespace + key
        // 将每个mutation包装后注册到_mutations中
        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)
      })
    
      module.forEachChild((child, key) => { 
        installModule(store, rootState, path.concat(key), child, hot)
      })
    }

首先，将启用namespaced的module平级放入\_modulesNamespaceMap中，方便后续获取相关module。然后，如果当前module是子module，则将当前module的State以响应式的方式加入到父State中。接着创建一个当前module的上下文对象

function makeLocalContext (store, namespace, path) { 
      const noNamespace = namespace === ''
    
      const local = { 
      	// 如果没有namespace则直接用原来的dispatch，
      	// 否则为了方便同一个module里方便调用，会用一个帮忙处理namespace的dispatch
        dispatch: noNamespace ? store.dispatch : (_type, _payload, _options) => { 
          // 统一格式，如果_type是对象则解构成字符串
          const args = unifyObjectStyle(_type, _payload, _options)
          const {  payload, options } = args
          let {  type } = args
    
          if (!options || !options.root) { 
            type = namespace + type
            if (__DEV__ && !store._actions[type]) { 
              console.error(`[vuex] unknown local action type: ${ args.type}, global type: ${ type}`)
              return
            }
          }
    
          return store.dispatch(type, payload)
        },
    	// 原来同上面的dispatch
        commit: noNamespace ? store.commit : (_type, _payload, _options) => { 
          const args = unifyObjectStyle(_type, _payload, _options)
          const {  payload, options } = args
          let {  type } = args
    
          if (!options || !options.root) { 
            type = namespace + type
            if (__DEV__ && !store._mutations[type]) { 
              console.error(`[vuex] unknown local mutation type: ${ args.type}, global type: ${ type}`)
              return
            }
          }
    
          store.commit(type, payload, options)
        }
      }
    
      // 利用重写get方法实现延迟处理，以获取更新后的数据，因为当前可能没递归完
      Object.defineProperties(local, { 
        getters: { 
          get: noNamespace
            ? () => store.getters
            // 对有namespace的按namespace获取对应getter
            : () => makeLocalGetters(store, namespace)
        },
        state: { 
          // 根据path从State树中获取当前State
          get: () => getNestedState(store.state, path)
        }
      })
    
      return local
    }
    
    function makeLocalGetters (store, namespace) { 
      if (!store._makeLocalGettersCache[namespace]) { 
        const gettersProxy = { }
        const splitPos = namespace.length
        Object.keys(store.getters).forEach(type => { 
          // 对不是当前命名空间的不处理
          if (type.slice(0, splitPos) !== namespace) return
    	  // 获取注册时的getter名称
          const localType = type.slice(splitPos)
          
          // 重定义gettersProxy，使其在使用getter时不用加namespace
          Object.defineProperty(gettersProxy, localType, { 
            get: () => store.getters[type],
            enumerable: true
          })
        })
        store._makeLocalGettersCache[namespace] = gettersProxy
      }
    
      return store._makeLocalGettersCache[namespace]
    }

上下文中实现了dispatch、commint、getters和state，其中getters和state重写了get方法，使其可以在实例化完成后再去获取值。  
上下文定义完成后会分别注册mutation、action、getter和子module

// installModule
      module.forEachMutation((mutation, key) => { 
        const namespacedType = namespace + key
        // 将每个mutation包装后注册到_mutations中
        registerMutation(store, namespacedType, mutation, local)
      })
      
    function registerMutation (store, type, handler, local) { 
      const entry = store._mutations[type] || (store._mutations[type] = [])
      entry.push(function wrappedMutationHandler (payload) { 
        handler.call(store, local.state, payload)
      })
    }

可以看到注册mutation就是简单的对mutation方法封装并放入到实例的\_mutations中，主要做的就是将state等相关参数传入，注意这里用到local.state就是为什么拿到的state是当前模块定义的state。action和getter都是差不多，分别将封装后的方法放入\_actions和\_wrappedGetters中。而子module的注册只是遍历递归调用了installModule方法。

#### **2.4 创建响应式** ####

Vuex会创建一个Vue实例实现响应式。

function resetStoreVM (store, state, hot) { 
      const oldVm = store._vm
    
      store.getters = { }
      // 这个变量在创建module上文的时候在makeLocalGetters 方法里出现过
      store._makeLocalGettersCache = Object.create(null)
      const wrappedGetters = store._wrappedGetters
      const computed = { }
      // 根据_wrappedGetters（所有二次封装后的getter）生成相应的计算属性对象
      // 利用计算属性的懒更新，减少初始化计算量
      // 给store.getters添加getter并重写get方法，使其从Vue实例中取值（计算属性中）
      forEachValue(wrappedGetters, (fn, key) => { 
      	// 原注释说，如果直接使用内联函数，则会导致oldVm被缓存（奇怪，闭包里没有用到oldVm为什么被缓存？），
      	// 所以用partial返回一个闭包函数，使其仅缓存传入是store
        computed[key] = partial(fn, store)
        Object.defineProperty(store.getters, key, { 
          get: () => store._vm[key],
          enumerable: true // for local getters
        })
      })
    
      const silent = Vue.config.silent
      Vue.config.silent = true
      store._vm = new Vue({ 
        data: { 
          $$state: state
        },
        computed
      })
      Vue.config.silent = silent
    
      // 在_vm上加一个监听器，监听是否直接修改了state
      if (store.strict) { 
        enableStrictMode(store)
      }
    
      // 如果重新创建Vue实例则把旧实例销毁
      if (oldVm) { 
        if (hot) { 
          store._withCommit(() => { 
            oldVm._data.$$state = null
          })
        }
        Vue.nextTick(() => oldVm.$destroy())
      }
    }

可以看到，首先根据在installModule中生成的\_wrappedGetters遍历，生成一个computed对象，并将相关getter添加到store.getters中且重写get方法，使其指向Vue实例。然后创建一个Vue实例，将State树传入data实现响应式，将computed对象赋给computed属性，实现计算属性。最后就是对严格模式和旧实例的处理。

#### **2.5 完成** ####

到目前为止实例创建已经完成，剩下的插件和devtools就不细讲了。

## **3 API** ##

#### **3.1 commit** ####

commit 的功能是触发mutation

// 统一格式
    function unifyObjectStyle (type, payload, options) { 
      if (isObject(type) && type.type) { 
        options = payload
        payload = type
        type = type.type
      }
    
      return {  type, payload, options }
    }
    
    commit (_type, _payload, _options) { 
      const { 
        type,
        payload,
        options
      } = unifyObjectStyle(_type, _payload, _options)
    
      const mutation = {  type, payload }
      const entry = this._mutations[type]
      if (!entry) { 
        if (__DEV__) { 
          console.error(`[vuex] unknown mutation type: ${ type}`)
        }
        return
      }
      // 执行相关mutations
      this._withCommit(() => { 
        entry.forEach(function commitIterator (handler) { 
          handler(payload)
        })
      })
    
      this._subscribers
        .slice() // 浅复制相关订阅函数
        .forEach(sub => sub(mutation, this.state))
    
      if (
        __DEV__ &&
        options && options.silent
      ) { 
        console.warn(
          `[vuex] mutation type: ${ type}. Silent option has been removed. ` +
          'Use the filter functionality in the vue-devtools'
        )
      }
    }

commit方法首先将传入的参数统一格式，再从\_mutations中取出对应的mutation列表，然后遍历触发相关mutation。最后触发订阅函数。

#### **3.2 dispatch** ####

dispatch的功能是触发相关action

dispatch (_type, _payload) { 
      // check object-style dispatch
      const { 
        type,
        payload
      } = unifyObjectStyle(_type, _payload)
    
      const action = {  type, payload }
      const entry = this._actions[type]
      if (!entry) { 
        if (__DEV__) { 
          console.error(`[vuex] unknown action type: ${ type}`)
        }
        return
      }
    
      try { 
        this._actionSubscribers
          .slice()
          .filter(sub => sub.before)
          .forEach(sub => sub.before(action, this.state))
      } catch (e) { 
        if (__DEV__) { 
          console.warn(`[vuex] error in before action subscribers: `)
          console.error(e)
        }
      }
    
      const result = entry.length > 1
        ? Promise.all(entry.map(handler => handler(payload)))
        : entry[0](payload)
    
      return new Promise((resolve, reject) => { 
        result.then(res => { 
          try { 
            this._actionSubscribers
              .filter(sub => sub.after)
              .forEach(sub => sub.after(action, this.state))
          } catch (e) { 
            if (__DEV__) { 
              console.warn(`[vuex] error in after action subscribers: `)
              console.error(e)
            }
          }
          resolve(res)
        }, error => { 
          try { 
            this._actionSubscribers
              .filter(sub => sub.error)
              .forEach(sub => sub.error(action, this.state, error))
          } catch (e) { 
            if (__DEV__) { 
              console.warn(`[vuex] error in error action subscribers: `)
              console.error(e)
            }
          }
          reject(error)
        })
      })
    }

dispatch方法和commit很像，也是先将参数统一格式，但是后面和commit有所不同，commit的订阅函数只能在触发mutation后触发，在action里，可以对每个订阅函数设置是在触发action前还是后，而且还可以订阅action报错事件。action在注册时也有封装过，会返回一个Promise，所以有多个action需要触发时用了Promise.al()方法。

#### **3.3 subscribe** ####

订阅 store 的 mutation，会在mutation完成后调用。

subscribe (fn, options) { 
      return genericSubscribe(fn, this._subscribers, options)
    }
    
    function genericSubscribe (fn, subs, options) { 
      if (subs.indexOf(fn) < 0) { 
        options && options.prepend
          ? subs.unshift(fn)
          : subs.push(fn)
      }
      return () => { 
        const i = subs.indexOf(fn)
        if (i > -1) { 
          subs.splice(i, 1)
        }
      }
    }

首先会判断\_subscribers中是否已注册，如果没注册则根据prepend是插入开头还是末尾，最后返回一个注销函数。

#### **3.4 subscribeAction** ####

订阅 store 的 action，可以订阅action触发前、触发后和出错时。

subscribeAction (fn, options) { 
      const subs = typeof fn === 'function' ? {  before: fn } : fn
      return genericSubscribe(subs, this._actionSubscribers, options)
    }

首先判断fn是否为函数，如果是，则默认放入before中，既action触发前调用。然后就是调了和subscribe一样的方法。

#### **3.5 watch** ####

响应式地侦听 fn 的返回值，当值改变时调用回调函数。

watch (getter, cb, options) { 
      if (__DEV__) { 
        assert(typeof getter === 'function', `store.watch only accepts a function.`)
      }
      return this._watcherVM.$watch(() => getter(this.state, this.getters), cb, options)
    }

这里就是简单的使用了Vue的监听函数。

#### **3.6 replaceState** ####

替换 store 的根状态。

get state () { 
      return this._vm._data.$$state
    }
    
    replaceState (state) { 
      this._withCommit(() => { 
        this._vm._data.$$state = state
      })
    }

可以看到，实例的state的get方法为返回Vue实例的`$$state`。所以只要将Vue实例的响应式数据`$$state`替换就行。

#### **3.7 registerModule** ####

注册动态模块

// store.js
    registerModule (path, rawModule, options = { }) { 
      if (typeof path === 'string') path = [path]
    
      if (__DEV__) { 
        assert(Array.isArray(path), `module path must be a string or an Array.`)
        assert(path.length > 0, 'cannot register the root module by using registerModule.')
      }
    
      this._modules.register(path, rawModule)
      installModule(this, this.state, path, this._modules.get(path), options.preserveState)
      // reset store to update getters...
      resetStoreVM(this, this.state)
    }
    
    // module-collection.js
    register (path, rawModule, runtime = true) { 
      if (__DEV__) { 
        assertRawModule(path, rawModule)
      }
    
      const newModule = new Module(rawModule, runtime)
      if (path.length === 0) { 
        this.root = newModule
      } else { 
        const parent = this.get(path.slice(0, -1))
        parent.addChild(path[path.length - 1], newModule)
      }
    
      // register nested modules
      if (rawModule.modules) { 
        forEachValue(rawModule.modules, (rawChildModule, key) => { 
          this.register(path.concat(key), rawChildModule, runtime)
        })
      }
    }

首先，会调用module树的register方法将rawModule按path添加到module树中。 然后调用installModule方法，将state添加到State树中，并处理相关功能。最后调用resetStoreVM重新创建Vue实例，并将旧的Vue实例销毁。

#### **3.8 unregisterModule** ####

卸载一个动态模块

// store.js
    unregisterModule (path) { 
      if (typeof path === 'string') path = [path]
    
      if (__DEV__) { 
        assert(Array.isArray(path), `module path must be a string or an Array.`)
      }
    
      this._modules.unregister(path)
      this._withCommit(() => { 
        const parentState = getNestedState(this.state, path.slice(0, -1))
        Vue.delete(parentState, path[path.length - 1])
      })
      resetStore(this)
    }
    
    function resetStore (store, hot) { 
      store._actions = Object.create(null)
      store._mutations = Object.create(null)
      store._wrappedGetters = Object.create(null)
      store._modulesNamespaceMap = Object.create(null)
      const state = store.state
      // 这里最后一个参数传了true，所以state会被保留
      installModule(store, state, [], store._modules.root, true)
      // reset vm
      resetStoreVM(store, state, hot)
    }
    
    // module-collection.js
    unregister (path) { 
      const parent = this.get(path.slice(0, -1))
      const key = path[path.length - 1]
      const child = parent.getChild(key)
    
      if (!child) { 
        if (__DEV__) { 
          console.warn(
            `[vuex] trying to unregister module '${ key}', which is ` +
            `not registered`
          )
        }
        return
      }
    
      if (!child.runtime) { 
        return
      }
    
      parent.removeChild(key)
    }

首先，会调用module树的unregister方法将按path获取到的module从module树中删除。 然后将state从state树中删除，最后调用resetStore将相关变量重置，并重新安装所有模块和重新生成Vue实例，但是会保留原state。

#### **3.9 hasModule** ####

检查该模块的名字是否已经被注册

// store.js
    hasModule (path) { 
      if(typeof path === 'string') path = [path]
    
      if (__DEV__) { 
        assert(Array.isArray(path), `module path must be a string or an Array.`)
      }
    
      return this._modules.isRegistered(path)
    }
    
    // module-collection.js
    isRegistered (path) { 
      const parent = this.get(path.slice(0, -1))
      const key = path[path.length - 1]
    
      return parent.hasChild(key)
    }

调用module树的isRegistered方法，先找到父module再调用父module的hasChild方法判断。

#### **3.10 hotUpdate** ####

热替换新的 action 和 mutation

// store.js
    hotUpdate (newOptions) { 
      this._modules.update(newOptions)
      resetStore(this, true)
    }
    
    // module-collection.js
    update (rawRootModule) { 
      update([], this.root, rawRootModule)
    }
    
    function update (path, targetModule, newModule) { 
      if (__DEV__) { 
        assertRawModule(path, newModule)
      }
    
      // update target module
      targetModule.update(newModule)
    
      // update nested modules
      if (newModule.modules) { 
        for (const key in newModule.modules) { 
          if (!targetModule.getChild(key)) { 
            if (__DEV__) { 
              console.warn(
                `[vuex] trying to add a new module '${ key}' on hot reloading, ` +
                'manual reload is needed'
              )
            }
            return
          }
          update(
            path.concat(key),
            targetModule.getChild(key),
            newModule.modules[key]
          )
        }
      }
    }
    
    // module.js
    update (rawModule) { 
      this._rawModule.namespaced = rawModule.namespaced
      if (rawModule.actions) { 
        this._rawModule.actions = rawModule.actions
      }
      if (rawModule.mutations) { 
        this._rawModule.mutations = rawModule.mutations
      }
      if (rawModule.getters) { 
        this._rawModule.getters = rawModule.getters
      }
    }

首先调用module树的update，该方法会递归遍历所有module并调用module的update方法，将相关项更新。最后调用resetStore重新安装所有模块和重新生成Vue实例，但是会保留原state。注意，这里resetStore方法的第二参数传了true，这会先将旧Vue实例的`$$state`置为null，这就能触发watch方法中注册的响应式监听。  
这里不知道为什么，热重载要触发watch方法的监听函数，而registerModule和unregisterModule方法也重新生成Vue实例却不触发监听函数。

## **4 辅助函数** ##

#### **4.1 mapState** ####

为组件创建计算属性以获取Store中的状态

export const mapState = normalizeNamespace((namespace, states) => { 
      const res = { }
      if (__DEV__ && !isValidMap(states)) { 
        console.error('[vuex] mapState: mapper parameter must be either an Array or an Object')
      }
      normalizeMap(states).forEach(({  key, val }) => { 
        res[key] = function mappedState () { 
          let state = this.$store.state
          let getters = this.$store.getters
          if (namespace) { 
            const module = getModuleByNamespace(this.$store, 'mapState', namespace)
            if (!module) { 
              return
            }
            state = module.context.state
            getters = module.context.getters
          }
          return typeof val === 'function'
            ? val.call(this, state, getters)
            : state[val]
        }
        // mark vuex getter for devtools
        res[key].vuex = true
      })
      return res
    })
    
    function normalizeNamespace (fn) { 
      return (namespace, map) => { 
        if (typeof namespace !== 'string') { 
          map = namespace
          namespace = ''
        } else if (namespace.charAt(namespace.length - 1) !== '/') { 
          namespace += '/'
        }
        return fn(namespace, map)
      }
    }
    
    function normalizeMap (map) { 
      // 判断是否为数组或object
      if (!isValidMap(map)) { 
        return []
      }
      return Array.isArray(map)
        ? map.map(key => ({  key, val: key }))
        : Object.keys(map).map(key => ({  key, val: map[key] }))
    }

首先会将函数进行一层封装，用于处理namespace。然后调用normalizeMap处理成统一格式，接着遍历生成一个计算属性对象，每个计算属性会根据namespace从不同地方取值。从代码看出mapState可以直接用键名取值，也可以传入一个函数。

#### **4.2 mapMutations** ####

给组件添加方法用于提交mutation

export const mapMutations = normalizeNamespace((namespace, mutations) => { 
      const res = { }
      if (__DEV__ && !isValidMap(mutations)) { 
        console.error('[vuex] mapMutations: mapper parameter must be either an Array or an Object')
      }
      normalizeMap(mutations).forEach(({  key, val }) => { 
        res[key] = function mappedMutation (...args) { 
          // Get the commit method from store
          let commit = this.$store.commit
          if (namespace) { 
            const module = getModuleByNamespace(this.$store, 'mapMutations', namespace)
            if (!module) { 
              return
            }
            commit = module.context.commit
          }
          return typeof val === 'function'
            ? val.apply(this, [commit].concat(args))
            : commit.apply(this.$store, [val].concat(args))
        }
      })
      return res
    })

#### **4.3 mapGetters** ####

给组件创建计算属性用于获取getter的返回值

export const mapGetters = normalizeNamespace((namespace, getters) => { 
      const res = { }
      if (__DEV__ && !isValidMap(getters)) { 
        console.error('[vuex] mapGetters: mapper parameter must be either an Array or an Object')
      }
      normalizeMap(getters).forEach(({  key, val }) => { 
        // The namespace has been mutated by normalizeNamespace
        val = namespace + val
        res[key] = function mappedGetter () { 
          if (namespace && !getModuleByNamespace(this.$store, 'mapGetters', namespace)) { 
            return
          }
          if (__DEV__ && !(val in this.$store.getters)) { 
            console.error(`[vuex] unknown getter: ${ val}`)
            return
          }
          return this.$store.getters[val]
        }
        // mark vuex getter for devtools
        res[key].vuex = true
      })
      return res
    })

#### **4.4 mapActions** ####

创建组件方法分发 action

export const mapActions = normalizeNamespace((namespace, actions) => { 
      const res = { }
      if (__DEV__ && !isValidMap(actions)) { 
        console.error('[vuex] mapActions: mapper parameter must be either an Array or an Object')
      }
      normalizeMap(actions).forEach(({  key, val }) => { 
        res[key] = function mappedAction (...args) { 
          // get dispatch function from store
          let dispatch = this.$store.dispatch
          if (namespace) { 
            const module = getModuleByNamespace(this.$store, 'mapActions', namespace)
            if (!module) { 
              return
            }
            dispatch = module.context.dispatch
          }
          return typeof val === 'function'
            ? val.apply(this, [dispatch].concat(args))
            : dispatch.apply(this.$store, [val].concat(args))
        }
      })
      return res
    })

#### **4.5 createNamespacedHelpers** ####

创建基于命名空间的组件绑定辅助函数。省去了每次调用辅助函数时都要传namespace的麻烦。

export const createNamespacedHelpers = (namespace) => ({ 
      mapState: mapState.bind(null, namespace),
      mapGetters: mapGetters.bind(null, namespace),
      mapMutations: mapMutations.bind(null, namespace),
      mapActions: mapActions.bind(null, namespace)
    })

## **5 总结** ##

Vuex的核心还是Vue的响应式，所以Vuex只能依附于Vue使用，但是这样也非常简洁、非常方便。有时候某个地方看不懂，可能是由于哪些地方漏看了，只需要回过头多看几遍，一定能茅舍顿开。