vuex 源代码简析

说明

以下内容均是以 Vuex 2.0.0 版本展开分析。
此篇文章，是自己对 Vuex 实现分析的记录性文章，如有任何错误，欢迎指正交流。

Vuex 示意图
在说之前先来看一张官方文档提供的一张图

首先组件渲染依赖了部分全局的 State 内部预先定义的属性。
组件内部需要更新之前依赖的 State 内部属性，则需要调度（Dispatch）触发 Action 响应状态变化（也可直接提交 mutation）。
响应状态变化函数内部必须提交 mutation 去更改状态（类似发事件）。
State 内部属性的更改，触发依赖其属性的组件重新渲染。

基础示例剖析
了解了大致流程，接下来我们就以基础示例入手，剖析其实现了哪些功能，根据其实现的功能逐步去捋清其代码实现
import Vue from ‘vue’
import Vuex from ‘vuex’

// 注册插件
Vue.use(Vuex)

// 根状态对象。每个Vuex实例只是一个状态树。
const state = { count: 0 }

// mutations 实际上是改变状态的操作。每个 mutation 处理程序都将整个状态树作为第一个参数，然后是附加的有效负载参数。
// mutations 必须是同步的，并且可以通过插件记录下来，以便调试。
const mutations = {
increment (state) {
state.count++
},
decrement (state) {
state.count–
}
}

// actions 是导致副作用并可能涉及异步操作的函数。
const actions = {
increment: ({ commit }) => commit(‘increment’),
decrement: ({ commit }) => commit(‘decrement’),
incrementIfOdd ({ commit, state }) {
if ((state.count + 1) % 2 === 0) {
commit(‘increment’)
}
},
incrementAsync ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit(‘increment’)
resolve()
}, 1000)
})
}
}

// getters are functions
const getters = {
evenOrOdd: state => state.count % 2 === 0 ? ‘even’ : ‘odd’
}

// 模块
const moduleDemo = {
state: { moduleCount: 1 },
mutations: {
// state: 模块的局部状态对象。
moduleIncrement(state) {
state.moduleCount++
},
},
actions: {
moduleIncrement: ({ commit }) => commit(‘moduleIncrement’),
},
getters: {
moduleCountPlus: ({ moduleCount }) => moduleCount++
}
}

// Vuex实例是通过组合 state、 mutations 、actions 和 getter 创建的。
const store = new Vuex.Store({
state,
getters,
actions,
mutations,
modules: {
moduleDemo
},
})

new Vue({
el: ‘#app’,
store
})

复制代码
根据上述基础使用，我们大概可以梳理出以下几点：
注册插件。
定义 store 所需配置参数。
实例化 Store 类.
实例化 Vue 并传入 store。

在看具体的代码实现之前，我们大致的先了解一下整个 Vuex 入口文件内的大致内容：
import devtoolPlugin from ‘./plugins/devtool’
import applyMixin from ‘./mixin’
import { mapState, mapMutations, mapGetters, mapActions } from ‘./helpers’
import { isObject, isPromise, assert } from ‘./util’

let Vue // 绑定安装

// Store 全局单例模式管理
class Store { … }

// 更新模块
function updateModule(targetModule, newModule) { … }

// 重置 Store
function resetStore(store) { … }

// 重置 Store 上 Vue 实例
function resetStoreVM(store, state) { … }

// 安装模块
function installModule(store, rootState, path, module, hot) { … }

// 注册 mutations 构造器选项
function registerMutation(store, type, handler, path = []) { … }

// 注册 action
function registerAction(store, type, handler, path = []) { … }

// 包装 getters
function wrapGetters(store, moduleGetters, modulePath) { … }

// 启用严格模式
function enableStrictMode(store) {}

// 获取嵌套的状态
function getNestedState(state, path) {}

// 插件注册方法
function install(_Vue) {}

// 自动注册插件
if (typeof window !== ‘undefined’ && window.Vue) {
install(window.Vue)
}

export default {
Store,
install,
mapState,
mapMutations,
mapGetters,
mapActions
}
复制代码在了解了其内部构造，我们就根据上述梳理，逐点分析其实现。
注册插件
我们知道，Vue 的插件都需要给 Vue 提供一个注册钩子函数 installl, 执行 Vue.use(Vuex) 实际内部走的是 install 函数的内部调用。
install

// 插件注册：vue 内部在调用会把 Vue 透传过来
function install(_Vue) {
// 避免重复注册
if (Vue) {
console.error(
‘[vuex] already installed. Vue.use(Vuex) should be called only once.’
)
return
}
// 绑定安装
Vue = _Vue
// 应用全局 Vue.mixins
applyMixin(Vue)
}

// 自动注册机制
if (typeof window !== ‘undefined’ && window.Vue) {
install(window.Vue)
}

复制代码applyMixin
export default function (Vue) {
// 获取 Vue 版本号
const version = Number(Vue.version.split(’.’)[0])

// 版本号为 2.x
if (version >= 2) {
// 若存在 init 钩子则把 VuexInit 混入 初始化阶段
// 其它混入 beforeCreate 阶段
const usesInit = Vue.config._lifecycleHooks.indexOf(‘init’) > -1
Vue.mixin(usesInit ? { init: vuexInit } : { beforeCreate: vuexInit })
} else {
// 覆盖 init 并为 1.x 注入 vuex init 过程。 向后兼容性。
const _init = Vue.prototype._init
Vue.prototype._init = function (options = {}) {
options.init = options.init
? [vuexInit].concat(options.init)
: vuexInit
_init.call(this, options)
}
}

/**

• Vuex init钩子，注入到每个实例init钩子列表中。
  */
  function vuexInit() {
  // 获取实例配置参数
  const options = this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …store) { this.store = options.store
  // 若不存在，则去寻找父级 store 实例
  } else if (options.parent && options.parent.KaTeX parse error: Expected '}', got 'EOF' at end of input: store) { this.store = options.parent.$store
  }
  }
  }

复制代码注：_lifecycleHooks

Vue 内部配置项，引用其生命周期相关钩子函数的函数名，由于遗留原因而暴露的配置项。

在 Vue 2.0.0 ⬆️ 其引用为：

[
‘beforeCreate’,
‘created’,
‘beforeMount’,
‘mounted’,
‘beforeUpdate’,
‘updated’,
‘beforeDestroy’,
‘destroyed’,
‘activated’, // 激活
‘deactivated’, // 停用
‘errorCaptured’ // 捕获错误
]
复制代码
在 Vue v2.0.0-alpha.6 ⬇️ 其引用为：

/**

• List of lifecycle hooks.
  */
  _lifecycleHooks: [
  ‘init’,
  ‘created’,
  ‘beforeMount’,
  ‘mounted’,
  ‘beforeUpdate’,
  ‘updated’,
  ‘beforeDestroy’,
  ‘destroyed’,
  ‘activated’,
  ‘deactivated’
  ]
  复制代码

若对此有兴趣，可以研究一下 Vue.js 版本的更迭。
根据上述分析我们知道，在注册插件时，根据Vue的不同版本选择合适的混入时机，使得创建的每个 Vue 实例在 “初始化阶段” 做些预处理（在实例添加$store 属性，其值为 Store 实例）。那么接下来我们就具体来看看 Store 内部做了些什么？
Store
/**

• Store

• @class Store 全局单例模式管理
  */
  class Store {
  constructor(options = {}) {
  assert(Vue, 在创建商店实例之前必须调用 Vue.use(Vuex))
  assert(typeof Promise !== ‘undefined’, vuex 需要一个 promise polyfill 在这个浏览器。)

  const {
  state = {}, // Object | Function Vuex store 实例的根 state 对象
  plugins = [], // Array 一个数组，包含应用在 store 上的插件方法。这些插件直接接收 store 作为唯一参数，可以监听 mutation
  strict = false // 严格模式下，任何 mutation 处理函数以外修改 Vuex state 都会抛出错误。
  } = options // Vuex.Store 构造器选项

  // store 内部状态
  this._options = options
  // 是否正在提交
  this._committing = false
  // 存储着 所有 actions
  this._actions = Object.create(null)
  // 存储着 所有 mutations
  this._mutations = Object.create(null)
  // 存储着 所有 Getters
  this._wrappedGetters = Object.create(null)
  this._runtimeModules = Object.create(null)
  // 订阅函数池
  this._subscribers = []
  // 存储着 Vue 实例
  this._watcherVM = new Vue()

  // bind commit and dispatch to self
  const store = this
  const { dispatch, commit } = this
  // 实例方法 - 分发 action 返回一个解析所有被触发的 action 处理器的 Promise。
  this.dispatch = function boundDispatch(type, payload) {
  return dispatch.call(store, type, payload)
  }
  // 实例方法 - 提交 mutation
  this.commit = function boundCommit(type, payload, options) {
  return commit.call(store, type, payload, options)
  }

  // 严格模式
  this.strict = strict

  // init root 模块。这还递归地注册所有子模块，并在 this._wrappedgechers 中收集所有模块 getter
  installModule(this, state, [], options)

  // 初始化负责反应性的存储vm(也将_wrappedgechers注册为计算属性)
  resetStoreVM(this, state)

  // 注入应用插件
  plugins.concat(devtoolPlugin).forEach(plugin => plugin(this))
  }

get state() {
return this._vm.state
}

set state(v) {
assert(false, 使用 store.replacestate() 显式替换存储状态。)
}

/**

• 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
• 如：store.commit(‘increment’)
• 每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
• 这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
• @param {String} type
• @param {Object} payload
• @param {Object} options
• @memberof Store
  */
  commit(type, payload, options) { … }

// 分发 action
dispatch(type, payload) { … }

subscribe(fn) { … }

watch(getter, cb, options) { … }

// 替换 State
replaceState(state) { … }

// 注册模块
registerModule(path, module) { … }

// 注销模块
unregisterModule(path) { … }

hotUpdate(newOptions) { … }

// 提交 mutation。
_withCommit(fn) {
// 存储当前提交状态
const committing = this._committing
// 置为提交状态
this._committing = true
// 调用更改状态函数
fn()
// 把提交状态置回原来的状态
this._committing = committing
}
}

复制代码简单分析梳理：

constructor：

首先在构造函数内部定义了一些属性（这里注释比较清楚）
执行了一些初始化 installModule、 resetStoreVM 等方法，下面将着重看一下其内部实现。

为 state 定义了取值函数（getter）和存值函数（setter），做一层代理(防止意外的修改)。

定义了一些实例方法 commit、dispatch 等（之后根据实际调用，具体分析）。

具体实现：
installModule - 安装模块
init root 模块。这还递归地注册所有子模块，并在 this._wrappedgechers 中收集所有模块 getter
/**

• 安装模块
• @param {Object} store Store 实例
• @param {Object | Function} rootState Vuex store 实例的根 state 对象
• @param {Array} path
• @param {Object} module Vuex.Store 构造器选项
• @param {*} hot
  */
  function installModule(store, rootState, path, module, hot) {
  const isRoot = !path.length // 是否是根还是模块
  // 从 Vuex.Store 构造器选项解构出相关选项
  const {
  state, // Vuex store 实例的根 state 对象。
  actions, // 在 store 上注册 action。处理函数总是接受 context 作为第一个参数，payload 作为第二个参数（可选）。
  mutations, // 在 store 上注册 mutation，处理函数总是接受 state 作为第一个参数（如果定义在模块中，则为模块的局部状态），payload 作为第二个参数（可选）。
  getters, // 在 store 上注册 getter，getter 方法接受以下参数： state, // 如果在模块中定义则为模块的局部状态. getters, // 等同于 store.getters.
  modules // 包含了子模块的对象，会被合并到 store
  } = module

// 设置 module 的 state
if (!isRoot && !hot) {
const parentState = getNestedState(rootState, path.slice(0, -1))
const moduleName = path[path.length - 1]
// 为根 State 添加模块的 state
store._withCommit(() => {
Vue.set(parentState, moduleName, state || {})
})
}

// 若存在 mutations 构造器选项 则将其全部选项注册
if (mutations) {
Object.keys(mutations).forEach(key => {
registerMutation(store, key, mutations[key], path)
})
}

// 注册 action
if (actions) {
Object.keys(actions).forEach(key => {
registerAction(store, key, actions[key], path)
})
}

// 包装 getters
if (getters) {
wrapGetters(store, getters, path)
}

// 安装模块
if (modules) {
Object.keys(modules).forEach(key => {
// 递归调用注册每一个模块
installModule(store, rootState, path.concat(key), modules[key], hot)
})
}
}
复制代码由上述初始化调用 installModule(this, state, [], options) 可知其入参，下面就看看各个选项注册的代码实现。
Mutation、Action、getter 注册
/**

• 注册 mutations 构造器选项
• @param {*} store
• @param {*} type
• @param {*} handler
• @param {*} [path=[]]
  */
  function registerMutation(store, type, handler, path = []) {
  const entry = store._mutations[type] || (store._mutations[type] = [])
  entry.push(function wrappedMutationHandler(payload) {
  handler(getNestedState(store.state, path), payload)
  })
  }

/**

• 注册 action
• @param {Object} store
• @param {String} type
• @param {Function} handler
• @param {Array} [path=[]]
  */
  function registerAction(store, type, handler, path = []) {
  const entry = store._actions[type] || (store._actions[type] = [])
  const { dispatch, commit } = store
  entry.push(function wrappedActionHandler(payload, cb) {
  // 注意这里透传的context: 不是 store 实例本身。
  dispatch,
  commit,
  getters: store.getters,
  state: getNestedState(store.state, path),
  rootState: store.state
  }, payload, cb)
  // 判断是否是 promise
  if (!isPromise(res)) {
  res = Promise.resolve(res)
  }
  // 处理应用的 devtools 插件
  if (store._devtoolHook) {
  return res.catch(err => {
  store._devtoolHook.emit(‘vuex:error’, err)
  throw err
  })
  } else {
  return res
  }
  })
  }

/**

• 包装 getters
• @param {Object} store
• @param {Object} moduleGetters
• @param {Array modulePath}
  */
  function wrapGetters(store, moduleGetters, modulePath) {
  Object.keys(moduleGetters).forEach(getterKey => {
  const rawGetter = moduleGetters[getterKey]
  if (store._wrappedGetters[getterKey]) {
  console.error([vuex] 重复的getter关键: ${getterKey})
  return
  }
  store._wrappedGetters[getterKey] = function wrappedGetter(store) {
  return rawGetter(
  getNestedState(store.state, modulePath), // local state
  store.getters, // getters
  store.state // root state
  )
  }
  })
  }

/**

• 获取嵌套的 state
• @param {Object} state
• @param {Array} path
• @returns
  */
  function getNestedState(state, path) {
  return path.length
  ? path.reduce((state, key) => state[key], state)
  : state
  }

复制代码

上述代码实现逻辑比较清晰，就是把注册信息添加到 _mutations、_actions、 _wrappedGetters 统一管理。

若存在模块则会将其state添加到 root state 中。

上述基础示例，最终安装结果如下：

_mutations: {
decrement: [
ƒ wrappedMutationHandler(payload)
],
increment: [
ƒ wrappedMutationHandler(payload)
],
moduleIncrement: [
ƒ wrappedMutationHandler(payload)
]
}

_actions: {
decrement: [
ƒ wrappedActionHandler(payload, cb)
],
increment: [
ƒ wrappedActionHandler(payload, cb)
],
incrementAsync: [
ƒ wrappedActionHandler(payload, cb)
],
incrementIfOdd: [
ƒ wrappedActionHandler(payload, cb)
],
moduleIncrement: [
ƒ wrappedActionHandler(payload, cb)
]
}

_wrappedGetters: {
evenOrOdd: ƒ wrappedGetter(store),
moduleCountPlus: ƒ wrappedGetter(store)
}

// root state
state: {
count: 0,
moduleDemo: {
moduleCount: 1
}
}

复制代码

resetStoreVM - 重置 Store 上 Vue 实例

/**

• 重置 Store 上 Vue 实例
• @param {*} store
• @param {*} state
  */
  function resetStoreVM(store, state) {
  // 取之前的 vue 实例
  const oldVm = store._vm

// 绑定存储公共 getter
store.getters = {}
// 获取 Store 中所有 getter
const wrappedGetters = store._wrappedGetters
const computed = {}
// 代理取值函数
Object.keys(wrappedGetters).forEach(key => {
const fn = wrappedGetters[key]
// 利用 computed 的延迟缓存机制
computed[key] = () => fn(store)
// 在公共 getter 上定义之前合并的 getter，并做一层取值代理，实际上取得是计算属性定义的 key 值。
Object.defineProperty(store.getters, key, {
get: () => store._vm[key]
})
})

// 使用 Vue 实例存储状态树抑制警告，以防用户添加了一些 funky global mixins
const silent = Vue.config.silent
// 关闭 Vue 内部的警告
Vue.config.silent = true
// 添加 _vm 属性，值为 Vue 实例
store._vm = new Vue({
data: { state },
computed
})
// 开启 Vue 内部的警告
Vue.config.silent = silent

// 启用严格模式 for new vm
// 严格模式下在非提交的情况下修改 state，抛出错误。
if (store.strict) {
enableStrictMode(store)
}

// 若存在之前的Vue实例
if (oldVm) {
// 在所有订阅的观察者中分派更改，以强制 getter 重新评估。
store._withCommit(() => {
oldVm.state = null
})
// 在下个更新队列之后销毁之前的 Vue 实例
Vue.nextTick(() => oldVm.$destroy())
}
}

/**

• 启用严格模式
• @param {Object} store
• @returns {void}
• 注：使 Vuex store 进入严格模式，在严格模式下，任何 mutation 处理函数以外修改 Vuex state 都会抛出错误。
  */
  function enableStrictMode(store) {
  store._vm.$watch(‘state’, () => {
  assert(store._committing, 不要在 mutation 处理程序之外对 vuex 存储状态进行改变；更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。)
  }, { deep: true, sync: true })
  }

复制代码在讲解具体用例前，先来看看 dispatch、commit 的代码实现：
dispatch、commit - 调度和提交
/**

• 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
• 如：store.commit(‘increment’)
• 每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
• 这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
• @param {*} type
• @param {*} payload
• @param {*} options
• @memberof Store
  */
  commit(type, payload, options) {
  // 检查对象样式提交 如：
  // store.commit({ type: ‘increment’, amount: 10 })
  if (isObject(type) && type.type) {
  options = payload
  payload = type // 使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数
  type = type.type
  }
  const mutation = { type, payload }
  const entry = this._mutations[type] // 查找 mutation
  // 若不存在则抛出错误
  if (!entry) {
  console.error([vuex] 未知 mutation 类型: ${type})
  return
  }
  // 提交 mutation
  this._withCommit(() => {
  entry.forEach(function commitIterator(handler) {
  handler(payload)
  })
  })
  // 若满足该条件，则：调用订阅池内所有的订阅函数
  if (!options || !options.silent) {
  this._subscribers.forEach(sub => sub(mutation, this.state))
  }
  }

/**

• 分发 action
• @param {*} type
• @param {*} payload
• @returns {Promise} 解析所有被触发的 action 处理器的 Promise
• @memberof Store
  */
  dispatch(type, payload) {
  // check object-style dispatch
  // 同上解释
  if (isObject(type) && type.type) {
  payload = type
  type = type.type
  }
  const entry = this._actions[type]
  if (!entry) {
  console.error([vuex] 未知 action 类型: ${type})
  return
  }
  return entry.length > 1
  ? Promise.all(entry.map(handler => handler(payload)))
  : entry0
  }
  复制代码

讲到这里整个流程就已经分析的差不多了。

这里顺便提一下：Mutation 必须是同步函数

若是异步这会使 devtool 中的 mutation 日志变得不可追踪。【参阅】

以下用例演示了从 dispatch(调度) action其内部触发 commit(提交) 进而调用 mutation 状态修改函数, 来达到更新状态。相当清晰?

Clicked: {{ $store.state.count }} times, count is {{ $store.getters.evenOrOdd }}.

const actions = {
increment: ({ commit }) => commit(‘increment’),
…
}

const mutations = {
increment (state) {
state.count++
},
…
}

const moduleDemo = {
state: { moduleCount: 1 },
mutations: {
moduleIncrement(state) {
state.moduleCount++
},
},
actions: {
moduleIncrement: ({ commit }) => commit(‘moduleIncrement’),
},
…
}

复制代码

其它细节
接下来我们就来看看我们在组件中经常使用的辅助函数实现如：
import {
mapActions,
mapActions,
mapMutations,
mapGetters
} from “vuex”;

export default {
computed: {
…mapState([
‘count’ // 映射 this.count 为 this.$store.state.count
]), // 或 …mapState({ count: state => state.count })

...mapGetters(["evenOrOdd"]),

},
methods: {
// 必须同步提交
…mapMutations([
‘increment’, // 将 this.increment() 映射为 this.$store.commit('increment')
// mapMutations 也支持载荷：
‘decrement’ // 将 this.decrement(amount) 映射为 this.$store.commit('decrement', amount)
]),
// 处理异步
…mapActions([
“increment”,
“decrement”,
“incrementIfOdd”,
“incrementAsync”
]),
}
};

复制代码mapState
/**

• state 映射处理函数
• @export
• @param {Array | Object} states
• @returns {Object}
  */
  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
  }

/**

• 规范参数类型
• @param {*} map
• @returns {Array}
  */
  function normalizeMap(map) {
  return Array.isArray(map)
  ? map.map(key => ({ key, val: key }))
  : Object.keys(map).map(key => ({ key, val: map[key] }))
  }
  复制代码
  我们能看出来，这些辅助函数，主要是做了一层映射，”解决重复和冗余，让你少按几次键“。
  这里只是提取了一个进行讲解，其它思路差不多，这里就不多说了。
  最后，本文着重点放在贯通流程，及常用实现，里面还有许多细节没有提及。
  若有兴趣请参阅 vuex 。建议将其代码拉下来，根据其用例，本地跑起来，断点去调式，结合文档慢慢去看，相信一定收获巨多！