【Vue】Vuex 从使用到原理分析（下篇）
前言
该系列分为上中下三篇：vue
- Vuex 从使用到原理分析（上篇）：介绍 Vuex，以及 Vuex 的几种常见写法；
- Vuex 从使用到原理分析（中篇）：分析 Vuex 的初始化以及模块获取安装；
- Vuex 从使用到原理分析（下篇）：分析 Vuex 和 Store 中的一些方法包括辅助函数；
在前面咱们尚未分析 store 是怎样提交 mutaion，怎样分发 dispatch 的呢？这篇就是对这些方法以及 4 个辅助函数进行分析。vuex
1. commit
commit 方法是惟一容许提交 mutaion 来修改 state 的途径，它定义在store.js里：数组
commit (_type, _payload, _options) {
const {
type,
payload,
options
} = unifyObjectStyle(_type, _payload, _options)
const mutation = { type, payload }
const entry = this._mutations[type]
if (!entry) {
if (process.env.NODE_ENV !== 'production') {
console.error(`[vuex] unknown mutation type: ${type}`)
}
return
}
this._withCommit(() => {
entry.forEach(function commitIterator (handler) {
handler(payload)
})
})
// ...不重要代码
}
复制代码
在前面咱们记得commit与dispatch方法是有多种传参写法的，因此这里第一步就是整合咱们所须要的参数，获取到 type、payload、与 options。app
从store._mutations上获取 type 对应的回调函数，若是没有找到，则在开发环境抛出错误，最后经过_withCommit来执行 entry 里的函数来执行 mutations 里的函数修改 state。异步
2. dispatch
dispatch前半部分与commit相同，获取 type 与 payload 而后从store._actions上拿到咱们定义的 actions 里的回调函数。函数
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 (process.env.NODE_ENV !== 'production') {
console.error(`[vuex] unknown action type: ${type}`)
}
return
}
// 下面省略了一些代码，至关于结果以下代码
return entry.length > 1
? Promise.all(entry.map(handler => handler(payload)))
: entry[0](payload)
}
复制代码
因为咱们 actions 里的方法返回的是 Promise，因此在 map 后用 Promise.all 来异步执行，而后 return 结果。post
3. mapState
在上篇的使用讲解中，咱们知道mapState能够帮助咱们在组件中更好的获取 state 里的数据，mapState定义在helpers.js中：学习
export const mapState = normalizeNamespace();
复制代码
一开始就是执行了normalizeNamespace方法，咱们先来看一下：ui
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)
}
}
复制代码
这个函数就是对命名空间的一层封装，若是有字符串型的命名空间，则把命名空间格式化成 '/moduleA' 的形式，不然就将参数后移，置空第一个参数（命名空间），再返回回调函数执行的结果。this
export const mapState = normalizeNamespace((namespace, states) => {
const res = {}
normalizeMap(states).forEach()
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 为 [{ key, value }] 的形式，例如：
- [1, 2] => [ { key: 1, value: 1 }, { key: 2, value: 2 } ]
- { a: 1, b: 2 } => [{ key: 'a', value: 1 }, { key: 'b', value: 2 }]
为何会有这一步，由于咱们在 computed 里定义 mapState() 的时候，有下面两种写法：
// 第一种
...mapState({
countAlias: 'count',
count: state => state.count,
}),
// 第二种
...mapState([
'count',
]),
复制代码
因此才有须要格式化参数的这一步。
接下来继续看：
export const mapState = normalizeNamespace((namespace, states) => {
const res = {}
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
})
复制代码
经过遍历格式化后的参数数组，给 res[key] 设置上 mappedState 函数，这个函数主要对 state、getters 设置正确的值（主要是是否有命名空间）。若是 val 是函数，则在此处执行，若是是非函数，则直接从 state 上取值。而后返回这个结果，最后返回 res 这个对象，因此咱们在组件中使用的时候能够直接在computed里经过扩展运算符直接扩展到上面。
因此咱们在组件中经过this[key]访问到的就是this.$store.state[key]或this.$store.state[namespace][key]的值了。
4. mapGetters
export const mapGetters = normalizeNamespace((namespace, getters) => {
const res = {}
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 (process.env.NODE_ENV !== 'production' && !(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
})
复制代码
与mapState相似，也是先定义 res 空对象，而后在 res[key] 上挂载方法，在方法内部判断命名空间，返回 store 上 getters 对应的值，最后返回这个 res 对象。
5. mapMutations
export const mapMutations = normalizeNamespace((namespace, mutations) => {
const res = {}
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
})
复制代码
前面都同样，都是格式化参数，而后从 store/module 上拿到 commit 方法，再判断 val 是否是函数，最终经过 store.commit 方法来修改 state 的值。
6. mapActions
export const mapActions = normalizeNamespace((namespace, actions) => {
const res = {}
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
})
复制代码
与mapMutations几乎同样，commit换成了dispatch而已。
7. registerModule
registerModule (path, rawModule, options = {}) {
if (typeof path === 'string') path = [path]
if (process.env.NODE_ENV !== 'production') {
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)
}
复制代码
看过中篇里的分析，这个方法就很简单了。首先是格式化 path 参数，path 能够传入字符串和数组，传数组时是注册一个带命名空间的模块，统一格式化成数组形式。
调用 register 方法 => 安装模块 => 初始化 storm._.vm。
8. unregisterModule
unregisterModule (path) {
if (typeof path === 'string') path = [path]
if (process.env.NODE_ENV !== 'production') {
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)
}
复制代码
首先也是格式化 path 参数为数组，而后调用unregister方法，这个方法定义在module/module-collectionjs里。
unregister (path) {
const parent = this.get(path.slice(0, -1))
const key = path[path.length - 1]
if (!parent.getChild(key).runtime) return
parent.removeChild(key)
}
复制代码
这个方法就是层层取值，找到该模块的父模块，而后从父模块的 _childrent 对象中移除对应的属性。
调用unregister后再经过_withcommit方法，将 state 从父模块的 state 中移除。
最后最后调用resetStore方法重置 store。
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
// init all modules
installModule(store, state, [], store._modules.root, true)
// reset vm
resetStoreVM(store, state, hot)
}
复制代码
这里就主要是重置几个核心概念，而后从新安装模块，从新初始化 store._vm。
9. createNamespacedHelpers
export const createNamespacedHelpers = (namespace) => ({
mapState: mapState.bind(null, namespace),
mapGetters: mapGetters.bind(null, namespace),
mapMutations: mapMutations.bind(null, namespace),
mapActions: mapActions.bind(null, namespace)
})
复制代码
这个函数太简单了，就是返回一个对象，这个对象包含 4 个传入了命名空间的辅助函数。
总结
到这里为止，整个Vuex的核心概念以及运行原理咱们都已经分析完了。理解了这些，咱们也能更好地在平时开发中定位错误，像里面一些normalizeNamespace、normalizeMap等方法也是咱们能在平时开发中学习使用的。
- 1. 【Vue】Vuex 从使用到原理分析（中篇）
- 2. 【Vue】Vuex 从使用到原理分析（上篇）
- 3. Vuex从使用到原理解析
- 4. 完全搞懂vue之vuex原理篇
- 5. 【Vue】Vuex 的原理
- 6. vue 使用 vuex
- 7. vue vuex使用
- 8. Vuex原理浅析
- 9. Vuex原理解析
- 10. Arouter从使用到原理
- 更多相关文章...
- • Git 分支管理 - Git 教程
- • Wireshark下载安装和使用教程 - TCP/IP教程
- • Java Agent入门实战（三）-JVM Attach原理与使用
- • ☆技术问答集锦（13）Java Instrument原理
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 【Vue】Vuex 从使用到原理分析（中篇）
- 2. 【Vue】Vuex 从使用到原理分析（上篇）
- 3. Vuex从使用到原理解析
- 4. 完全搞懂vue之vuex原理篇
- 5. 【Vue】Vuex 的原理
- 6. vue 使用 vuex
- 7. vue vuex使用
- 8. Vuex原理浅析
- 9. Vuex原理解析
- 10. Arouter从使用到原理