好嗨详细的vuex源码分析之API 是如何实现

Vuex 常见的 API 如 dispatch、commit 、subscribe 我们前面已经介绍过了，这里就不再赘述了，下面介绍的一些 Store 的 API，虽然不常用，但是了解一下也不错。

watch(getter, cb, options)

watch 作用是响应式的监测一个 getter 方法的返回值，当值改变时调用回调。getter 接收 store 的 state 作为唯一参数。来看一下它的实现：

watch (getter, cb, options) {
    assert(typeof getter === 'function', `store.watch only accepts a function.`)
    return this._watcherVM.$watch(() => getter(this.state), cb, options)
  }
复制代码

函数首先断言 watch 的 getter 必须是一个方法，接着利用了内部一个 Vue 的实例对象 ````this._watcherVM ``` 的 $watch 方法，观测 getter 方法返回值的变化，如果有变化则调用 cb 函数，回调函数的参数为新值和旧值。watch 方法返回的是一个方法，调用它则取消观测。

registerModule(path, module)

registerModule 的作用是注册一个动态模块，有的时候当我们异步加载一些业务的时候，可以通过这个 API 接口去动态注册模块，来看一下它的实现：

registerModule (path, module) {
    if (typeof path === 'string') path = [path]
    assert(Array.isArray(path), `module path must be a string or an Array.`)
    this._runtimeModules[path.join('.')] = module
    installModule(this, this.state, path, module)
    // reset store to update getters...
    resetStoreVM(this, this.state)
  }
复制代码

函数首先对 path 判断，如果 path 是一个 string 则把 path 转换成一个 Array。接着把 module 对象缓存到this._runtimeModules 这个对象里，path 用点连接作为该对象的 key。接着和初始化 Store 的逻辑一样，调用 installModule 和 resetStoreVm 方法安装一遍动态注入的 module。

unregisterModule(path)

和 registerModule 方法相对的就是 unregisterModule 方法，它的作用是注销一个动态模块，来看一下它的实现：

unregisterModule (path) {
    if (typeof path === 'string') path = [path]
    assert(Array.isArray(path), `module path must be a string or an Array.`)
    delete this._runtimeModules[path.join('.')]
    this._withCommit(() => {
      const parentState = getNestedState(this.state, path.slice(0, -1))
      Vue.delete(parentState, path[path.length - 1])
    })
    resetStore(this)
  }
复制代码

函数首先还是对 path 的类型做了判断，这部分逻辑和注册是一样的。接着从 this._runtimeModules 里删掉以 path 点连接的 key 对应的模块。接着通过 this._withCommit 方法把当前模块的 state 对象从父 state 上删除。最后调用 resetStore(this) 方法，来看一下这个方法的定义：

function resetStore (store) {
  store._actions = Object.create(null)
  store._mutations = Object.create(null)
  store._wrappedGetters = Object.create(null)
  const state = store.state
  // init root module
  installModule(store, state, [], store._options, true)
  // init all runtime modules
  Object.keys(store._runtimeModules).forEach(key => {
    installModule(store, state, key.split('.'), store._runtimeModules[key], true)
  })
  // reset vm
  resetStoreVM(store, state)
}
复制代码

这个方法作用就是重置 store 对象，重置 store 的 _actions、_mutations、_wrappedGetters 等等属性。然后再次调用 installModules 去重新安装一遍 Module 对应的这些属性，注意这里我们的最后一个参数 hot 为true，表示它是一次热更新。这样在 installModule 这个方法体类，如下这段逻辑就不会执行

function installModule (store, rootState, path, module, hot) {
  ... 
  // set state
  if (!isRoot && !hot) {
    const parentState = getNestedState(rootState, path.slice(0, -1))
    const moduleName = path[path.length - 1]
    store._withCommit(() => {
      Vue.set(parentState, moduleName, state || {})
    })
  }
  ...
}
复制代码

由于 hot 始终为 true，这里我们就不会重新对状态树做设置，我们的 state 保持不变。因为我们已经明确的删除了对应 path 下的 state 了，要做的事情只不过就是重新注册一遍 muations、actions 以及 getters。

回调 resetStore 方法，接下来遍历 this._runtimeModules 模块，重新安装所有剩余的 runtime Moudles。最后还是调用 resetStoreVM 方法去重置 Store 的 _vm 对象。

hotUpdate(newOptions)

hotUpdate 的作用是热加载新的 action 和 mutation。 来看一下它的实现：

hotUpdate (newOptions) {
  updateModule(this._options, newOptions)
  resetStore(this)
}
复制代码

函数首先调用 updateModule 方法去更新状态，其中当前 Store 的 opition 配置和要更新的 newOptions 会作为参数。来看一下这个函数的实现：

function updateModule (targetModule, newModule) {
  if (newModule.actions) {
    targetModule.actions = newModule.actions
  }
  if (newModule.mutations) {
    targetModule.mutations = newModule.mutations
  }
  if (newModule.getters) {
    targetModule.getters = newModule.getters
  }
  if (newModule.modules) {
    for (const key in newModule.modules) {
      if (!(targetModule.modules && targetModule.modules[key])) {
        console.warn(
          `[vuex] trying to add a new module '${key}' on hot reloading, ` +
          'manual reload is needed'
        )
        return
      }
      updateModule(targetModule.modules[key], newModule.modules[key])
    }
  }
}
复制代码

首先我们对 newOptions 对象的 actions、mutations 以及 getters 做了判断，如果有这些属性的话则替换 targetModule（当前 Store 的 options）对应的属性。最后判断如果 newOptions 包含 modules 这个 key，则遍历这个 modules 对象，如果 modules 对应的 key 不在之前的 modules 中，则报一条警告，因为这是添加一个新的 module ，需要手动重新加载。如果 key 在之前的 modules，则递归调用 updateModule，热更新子模块。

调用完 updateModule 后，回到 hotUpdate 函数，接着调用 resetStore 方法重新设置 store，刚刚我们已经介绍过了。

replaceState

replaceState的作用是替换整个 rootState，一般在用于调试，来看一下它的实现：

replaceState (state) {
    this._withCommit(() => {
      this._vm.state = state
    })
  }
复制代码

函数非常简单，就是调用 this._withCommit 方法修改 Store 的 rootState，之所以提供这个 API 是由于在我们是不能在 muations 的回调函数外部去改变 state。

到此为止，API 部分介绍完了，其实整个 Vuex 源码下的 src/index.js 文件里的代码基本都过了一遍。

辅助函数

Vuex 除了提供我们 Store 对象外，还对外提供了一系列的辅助函数，方便我们在代码中使用 Vuex，提供了操作 store 的各种属性的一系列语法糖，下面我们来一起看一下：

mapState

mapState 工具函数会将 store 中的 state 映射到局部计算属性中。为了更好理解它的实现，先来看一下它的使用示例：

// vuex 提供了独立的构建 工具 函数 Vuex.mapState
import { mapState } from 'vuex'
export default {
  // ...
  computed: mapState({
    // 箭头函数可以让代码非常简洁
    count: state => state.count,
    // 传入字符串 'count' 等同于 `state => state.count`
    countAlias: 'count',
    // 想访问局部状态，就必须借助于一个普通函数，函数中使用 `this` 获取局部状态
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}
复制代码

当计算属性名称和状态子树名称对应相同时，我们可以向 mapState 工具函数传入一个字符串数组。

computed: mapState([
  // 映射 this.count 到 this.$store.state.count
  'count'
])
复制代码

通过例子我们可以直观的看到，mapState 函数可以接受一个对象，也可以接收一个数组，那它底层到底干了什么事呢，我们一起来看一下源码这个函数的定义：

export function mapState (states) {
  const res = {}
  normalizeMap(states).forEach(({ key, val }) => {
    res[key] = function mappedState () {
      return typeof val === 'function'
        ? val.call(this, this.$store.state, this.$store.getters)
        : this.$store.state[val]
    }
  })
  return res
}
复制代码

函数首先对传入的参数调用 normalizeMap 方法，我们来看一下这个函数的定义：

function normalizeMap (map) {
  return Array.isArray(map)
    ? map.map(key => ({ key, val: key }))
    : Object.keys(map).map(key => ({ key, val: map[key] }))
}
复制代码

这个方法判断参数 map 是否为数组，如果是数组，则调用数组的 map 方法，把数组的每个元素转换成一个{key, val: key}的对象；否则传入的 map 就是一个对象（从 mapState 的使用场景来看，传入的参数不是数组就是对象），我们调用 Object.keys 方法遍历这个 map 对象的 key，把数组的每个 key 都转换成一个{key, val: key}的对象。最后我们把这个对象数组作为 normalizeMap 的返回值。

回到 mapState 函数，在调用了 normalizeMap 函数后，把传入的 states 转换成由 {key, val} 对象构成的数组，接着调用 forEach 方法遍历这个数组，构造一个新的对象，这个新对象每个元素都返回一个新的函数 mappedState，函数对 val 的类型判断，如果 val 是一个函数，则直接调用这个 val 函数，把当前 store 上的 state 和 getters 作为参数，返回值作为 mappedState 的返回值；否则直接把 this.$store.state[val] 作为 mappedState 的返回值。

那么为何 mapState 函数的返回值是这样一个对象呢，因为 mapState 的作用是把全局的 state 和 getters 映射到当前组件的 computed 计算属性中，我们知道在 Vue 中 每个计算属性都是一个函数。

为了更加直观地说明，回到刚才的例子：

import { mapState } from 'vuex'
export default {
  // ...
  computed: mapState({
    // 箭头函数可以让代码非常简洁
    count: state => state.count,
    // 传入字符串 'count' 等同于 `state => state.count`
    countAlias: 'count',
    // 想访问局部状态，就必须借助于一个普通函数，函数中使用 `this` 获取局部状态
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}
复制代码

经过 mapState 函数调用后的结果，如下所示：

import { mapState } from 'vuex'
export default {
  // ...
  computed: {
    count() {
	  return this.$store.state.count
    },
    countAlias() {
	  return this.$store.state['count']
    },
    countPlusLocalState() {
      return this.$store.state.count + this.localCount
    }
  }
}
复制代码

我们再看一下 mapState 参数为数组的例子：

computed: mapState([
  // 映射 this.count 到 this.$store.state.count
  'count'
])
复制代码

经过 mapState 函数调用后的结果，如下所示：

computed: {
  count() {
    return this.$store.state['count']
  }
}
复制代码

mapGetters

mapGetters 工具函数会将 store 中的 getter 映射到局部计算属性中。它的功能和 mapState 非常类似，我们来直接看它的实现：

export function mapGetters (getters) {
  const res = {}
  normalizeMap(getters).forEach(({ key, val }) => {
    res[key] = function mappedGetter () {
      if (!(val in this.$store.getters)) {
        console.error(`[vuex] unknown getter: ${val}`)
      }
      return this.$store.getters[val]
    }
  })
  return res
}
复制代码

mapGetters 的实现也和 mapState 很类似，不同的是它的 val 不能是函数，只能是一个字符串，而且会检查val in this.$store.getters 的值，如果为 false 会输出一条错误日志。为了更直观地理解，我们来看一个简单的例子：

import { mapGetters } from 'vuex'
export default {
  // ...
  computed: {
    // 使用对象扩展操作符把 getter 混入到 computed 中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}
复制代码

经过 mapGetters 函数调用后的结果，如下所示：

import { mapGetters } from 'vuex'
export default {
  // ...
  computed: {
    doneTodosCount() {
      return this.$store.getters['doneTodosCount']
    },
    anotherGetter() {
      return this.$store.getters['anotherGetter']
    }
  }
}
复制代码

再看一个参数 mapGetters 参数是对象的例子：

computed: mapGetters({
  // 映射 this.doneCount 到 store.getters.doneTodosCount
  doneCount: 'doneTodosCount'
})
复制代码

经过 mapGetters 函数调用后的结果，如下所示：

computed: {
  doneCount() {
    return this.$store.getters['doneTodosCount']
  }
}
复制代码

mapActions

mapActions 工具函数会将 store 中的 dispatch 方法映射到组件的 methods 中。和 mapState、mapGetters 也类似，只不过它映射的地方不是计算属性，而是组件的 methods 对象上。我们来直接看它的实现：

export function mapActions (actions) {
  const res = {}
  normalizeMap(actions).forEach(({ key, val }) => {
    res[key] = function mappedAction (...args) {
      return this.$store.dispatch.apply(this.$store, [val].concat(args))
    }
  })
  return res
}
复制代码

可以看到，函数的实现套路和 mapState、mapGetters 差不多，甚至更简单一些， 实际上就是做了一层函数包装。为了更直观地理解，我们来看一个简单的例子：

import { mapActions } from 'vuex'
export default {
  // ...
  methods: {
    ...mapActions([
      'increment' // 映射 this.increment() 到 this.$store.dispatch('increment')
    ]),
    ...mapActions({
      add: 'increment' // 映射 this.add() to this.$store.dispatch('increment')
    })
  }
}
复制代码

经过 mapActions 函数调用后的结果，如下所示：

import { mapActions } from 'vuex'
export default {
  // ...
  methods: {
    increment(...args) {
      return this.$store.dispatch.apply(this.$store, ['increment'].concat(args))
	}
    add(...args) {
      return this.$store.dispatch.apply(this.$store, ['increment'].concat(args))
	}
  }
}
复制代码

mapMutations

mapMutations 工具函数会将 store 中的 commit 方法映射到组件的 methods 中。和 mapActions 的功能几乎一样，我们来直接看它的实现：

export function mapMutations (mutations) {
  const res = {}
  normalizeMap(mutations).forEach(({ key, val }) => {
    res[key] = function mappedMutation (...args) {
      return this.$store.commit.apply(this.$store, [val].concat(args))
    }
  })
  return res
}
复制代码

函数的实现几乎也和 mapActions 一样，唯一差别就是映射的是 store 的 commit 方法。为了更直观地理解，我们来看一个简单的例子：

import { mapMutations } from 'vuex'
export default {
  // ...
  methods: {
    ...mapMutations([
      'increment' // 映射 this.increment() 到 this.$store.commit('increment')
    ]),
    ...mapMutations({
      add: 'increment' // 映射 this.add() 到 this.$store.commit('increment')
    })
  }
}
复制代码

经过 mapMutations 函数调用后的结果，如下所示：

import { mapActions } from 'vuex'
export default {
  // ...
  methods: {
    increment(...args) {
      return this.$store.commit.apply(this.$store, ['increment'].concat(args))
	}
    add(...args) {
      return this.$store.commit.apply(this.$store, ['increment'].concat(args))
	}
  }
}
复制代码

插件

Vuex 的 store 接收 plugins 选项，一个 Vuex 的插件就是一个简单的方法，接收 store 作为唯一参数。插件作用通常是用来监听每次 mutation 的变化，来做一些事情。

在 store 的构造函数的最后，我们通过如下代码调用插件：

import devtoolPlugin from './plugins/devtool'

// apply plugins
plugins.concat(devtoolPlugin).forEach(plugin => plugin(this))
复制代码

我们通常实例化 store 的时候，还会调用 logger 插件，代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  ...
  plugins: debug ? [createLogger()] : []
})
复制代码

在上述 2 个例子中，我们分别调用了 devtoolPlugin 和 createLogger() 2 个插件，它们是 Vuex 内置插件，我们接下来分别看一下他们的实现。

devtoolPlugin

devtoolPlugin 主要功能是利用 Vue 的开发者工具和 Vuex 做配合，通过开发者工具的面板展示 Vuex 的状态。它的源码在 src/plugins/devtool.js 中，来看一下这个插件到底做了哪些事情。

const devtoolHook =
  typeof window !== 'undefined' &&
  window.__VUE_DEVTOOLS_GLOBAL_HOOK__

export default function devtoolPlugin (store) {
  if (!devtoolHook) return

  store._devtoolHook = devtoolHook

  devtoolHook.emit('vuex:init', store)

  devtoolHook.on('vuex:travel-to-state', targetState => {
    store.replaceState(targetState)
  })

  store.subscribe((mutation, state) => {
    devtoolHook.emit('vuex:mutation', mutation, state)
  })
}
复制代码

我们直接从对外暴露的 devtoolPlugin 函数看起，函数首先判断了devtoolHook 的值，如果我们浏览器装了 Vue 开发者工具，那么在 window 上就会有一个 VUE_DEVTOOLS_GLOBAL_HOOK 的引用， 那么这个 devtoolHook 就指向这个引用。

接下来通过 devtoolHook.emit('vuex:init', store) 派发一个 Vuex 初始化的事件，这样开发者工具就能拿到当前这个 store 实例。

接下来通过 devtoolHook.on('vuex:travel-to-state', targetState => { store.replaceState(targetState) })监听 Vuex 的 traval-to-state 的事件，把当前的状态树替换成目标状态树，这个功能也是利用 Vue 开发者工具替换 Vuex 的状态。

最后通过 store.subscribe((mutation, state) => { devtoolHook.emit('vuex:mutation', mutation, state) }) 方法订阅 store 的 state 的变化，当 store 的 mutation 提交了 state 的变化， 会触发回调函数——通过 devtoolHook 派发一个 Vuex mutation 的事件，mutation 和 rootState 作为参数，这样开发者工具就可以观测到 Vuex state 的实时变化，在面板上展示最新的状态树。

loggerPlugin

通常在开发环境中，我们希望实时把 mutation 的动作以及 store 的 state 的变化实时输出，那么我们可以用 loggerPlugin 帮我们做这个事情。它的源码在 src/plugins/logger.js 中，来看一下这个插件到底做了哪些事情。

// Credits: borrowed code from fcomb/redux-logger

import { deepCopy } from '../util'

export default function createLogger ({
  collapsed = true,
  transformer = state => state,
  mutationTransformer = mut => mut
} = {}) {
  return store => {
    let prevState = deepCopy(store.state)

    store.subscribe((mutation, state) => {
      if (typeof console === 'undefined') {
        return
      }
      const nextState = deepCopy(state)
      const time = new Date()
      const formattedTime = ` @ ${pad(time.getHours(), 2)}:${pad(time.getMinutes(), 2)}:${pad(time.getSeconds(), 2)}.${pad(time.getMilliseconds(), 3)}`
      const formattedMutation = mutationTransformer(mutation)
      const message = `mutation ${mutation.type}${formattedTime}`
      const startMessage = collapsed
        ? console.groupCollapsed
        : console.group

      // render
      try {
        startMessage.call(console, message)
      } catch (e) {
        console.log(message)
      }

      console.log('%c prev state', 'color: #9E9E9E; font-weight: bold', transformer(prevState))
      console.log('%c mutation', 'color: #03A9F4; font-weight: bold', formattedMutation)
      console.log('%c next state', 'color: #4CAF50; font-weight: bold', transformer(nextState))

      try {
        console.groupEnd()
      } catch (e) {
        console.log('—— log end ——')
      }

      prevState = nextState
    })
  }
}

function repeat (str, times) {
  return (new Array(times + 1)).join(str)
}

function pad (num, maxLength) {
  return repeat('0', maxLength - num.toString().length) + num
}
复制代码

插件对外暴露的是 createLogger 方法，它实际上接受 3 个参数，它们都有默认值，通常我们用默认值就可以。createLogger 的返回的是一个函数，当我执行 logger 插件的时候，实际上执行的是这个函数，下面来看一下这个函数做了哪些事情。

函数首先执行了 let prevState = deepCopy(store.state) 深拷贝当前 store 的 rootState。这里为什么要深拷贝，因为如果是单纯的引用，那么 store.state 的任何变化都会影响这个引用，这样就无法记录上一个状态了。我们来了解一下 deepCopy 的实现，在 src/util.js 里定义：

function find (list, f) {
  return list.filter(f)[0]
}

export function deepCopy (obj, cache = []) {
  // just return if obj is immutable value
  if (obj === null || typeof obj !== 'object') {
    return obj
  }

  // if obj is hit, it is in circular structure
  const hit = find(cache, c => c.original === obj)
  if (hit) {
    return hit.copy
  }

  const copy = Array.isArray(obj) ? [] : {}
  // put the copy into cache at first
  // because we want to refer it in recursive deepCopy
  cache.push({
    original: obj,
    copy
  })

  Object.keys(obj).forEach(key => {
    copy[key] = deepCopy(obj[key], cache)
  })

  return copy
}
复制代码

deepCopy 并不陌生，很多开源库如 loadash、jQuery 都有类似的实现，原理也不难理解，主要是构造一个新的对象，遍历原对象或者数组，递归调用 deepCopy。不过这里的实现有一个有意思的地方，在每次执行 deepCopy 的时候，会用 cache 数组缓存当前嵌套的对象，以及执行 deepCopy 返回的 copy。如果在 deepCopy 的过程中通过 find(cache, c => c.original === obj) 发现有循环引用的时候，直接返回 cache 中对应的 copy，这样就避免了无限循环的情况。

回到 loggerPlugin 函数，通过 deepCopy 拷贝了当前 state 的副本并用 prevState 变量保存，接下来调用 store.subscribe 方法订阅 store 的 state 的变。 在回调函数中，也是先通过 deepCopy 方法拿到当前的 state 的副本，并用 nextState 变量保存。接下来获取当前格式化时间已经格式化的 mutation 变化的字符串，然后利用 console.group 以及 console.log 分组输出 prevState、mutation以及 nextState，这里可以通过我们 createLogger 的参数 collapsed、transformer 以及 mutationTransformer 来控制我们最终 log 的显示效果。在函数的最后，我们把 nextState 赋值给 prevState，便于下一次 mutation。

总结

Vuex 2.0 的源码分析到这就告一段落了，最后我再分享一下看源码的小心得：对于一个库或者框架源码的研究前，首先了解他们的使用场景、官网文档等；然后一定要用他，至少也要写几个小 demo，达到熟练掌握的程度；最后再从入口、API、使用方法等等多个维度去了解他内部的实现细节。如果这个库过于庞大，那就先按模块和功能拆分，一点点地消化。

最后还有一个问题，有些同学会问，源码那么枯燥，我们分析学习它的有什么好处呢？首先，学习源码有助于我们更深入掌握和应用这个库或者框架；其次，我们还可以学习到源码中很多编程技巧，可以迁移到我们平时的开发工作中；最后，对于一些高级开发工程师而言，我们可以学习到它的设计思想，对将来有一天我们也去设计一个库或者框架是非常有帮助的，这也是提升自身能力水平的非常好的途径。