前言
现在前端开发中vuejs是大部分前端工程师的首选，只要不是很小的项目都会引用vuex来进行状态管理。最近新开展的项目比较复杂，使用vuex的地方也比较多。在此过程中也遇到了不少问题。如今有时间正好研究下vuex框架源码，深入了解下他的底层实现。
为什么要使用vuex
在当前前端的spa模块化项目中不可避免的是某些变量需要在全局范围内引用，此时父子组件的传值，子父组件间的传值，兄弟组件间的传值成了我们需要解决的问题。虽然vue中提供了props（父传子）commit（子传父）兄弟间也可以用localstorage和sessionstorage。但是这种方式在项目开发中带来的问题比他解决的问题（难管理，难维护，代码复杂，安全性低）更多。vuex的诞生也是为了解决这些问题，从而大大提高我们vue项目的开发效率。（信不信由你=-=）我接触vue项目的这两年,虽然一直在用vuex（用的还算熟练），但是还没有深入的去了解过他的架构原理，最近正好有空，就来深入学习下。
vuex的整体架构主体
源码解析（工作原理）
- 根state的存储位置 当你在使用vuex时有没有想过你在代码中设置的state被vuex如何处理了呢
const store = new Vuex.Store({
state: { count: 0 },
mutations: { increment (state) {
state.count++
} } })
复制代码我们设置在跟state中的属性会被vuex存储在根元素中
this._modules = new ModuleCollection(options)//初始化
const state = this._modules.root.state//获取定义的state
复制代码vuex初始化时先去获取定义在state属性中的值new ModuleCollection(options)进行模块收集（重新组装我们定义在store中的相关属性）： 最终形成一棵module树
export default class ModuleCollection {
constructor (rawRootModule) {
// register root module (Vuex.Store options)
this.register([], rawRootModule, false)
}
get (path) {
return path.reduce((module, key) => {
return module.getChild(key)
}, this.root)
}
getNamespace (path) {
let module = this.root
return path.reduce((namespace, key) => {
module = module.getChild(key)
return namespace + (module.namespaced ? key + '/' : '')
}, '')
}
update (rawRootModule) {
update([], this.root, rawRootModule)
}
register (path, rawModule, runtime = true) {
if (process.env.NODE_ENV !== 'production') {
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)
})
}
}
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)
}
}
复制代码- commit(=>mutations)时做了什么
const { dispatch, commit } = this //初始化先绑定commit
this.commit = function boundCommit(type, payload, options) {
return commit.call(store, type, payload, options)
}
复制代码 绑定之后注册mutation（commit的属性）
复制代码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)
})
}
复制代码 commit(_type, _payload, _options) {
console.log('================commit=====================')
console.log(_type)
console.log(_payload)
console.log(_options)
// check object-style commit
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
}
//在执行mutation的时候，会将_committing设置为true，执行完毕后重置，在开启strict模式时，会监听state的变化，当变化时_committing不为true时会给出警告
this._withCommit(() => {
//迭代传入的commit数组
entry.forEach(function commitIterator(handler) {
handler(payload)
})
})
this._subscribers.forEach(sub => sub(mutation, this.state))
//当开发环境是抛出警告（如果commit的属性不存在）
if (
process.env.NODE_ENV !== 'production' &&
options && options.silent
) {
console.warn(
`[vuex] mutation type: ${type}. Silent option has been removed. ` +
'Use the filter functionality in the vue-devtools'
)
}
}
复制代码3.dispatch（=>actions）做了啥（初始化同commit）
//dispatch定义位置
this.dispatch = function boundDispatch(type, payload) {
return dispatch.call(store, type, payload)
}
复制代码绑定dispatch
function registerAction(store, type, handler, local) {
const entry = store._actions[type] || (store._actions[type] = [])
entry.push(function wrappedActionHandler(payload, cb) {
let res = handler.call(store, {
dispatch: local.dispatch,
commit: local.commit,
getters: local.getters,
state: local.state,
rootGetters: store.getters,
rootState: store.state
}, payload, cb)
//将res函数转为异步 promise
if (!isPromise(res)) {
res = Promise.resolve(res)
}
if (store._devtoolHook) {
return res.catch(err => {
store._devtoolHook.emit('vuex:error', err)
throw err
})
} else {
return res
}
})
}
复制代码注册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
}
try {
this._actionSubscribers
.filter(sub => sub.before)
.forEach(sub => sub.before(action, this.state))
} catch (e) {
if (process.env.NODE_ENV !== 'production') {
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 result.then(res => {
try {
this._actionSubscribers
.filter(sub => sub.after)
.forEach(sub => sub.after(action, this.state))
} catch (e) {
if (process.env.NODE_ENV !== 'production') {
console.warn(`[vuex] error in after action subscribers: `)
console.error(e)
}
}
return res
})
}
复制代码其他
vuex和全局变量的区别：(借用博客)
1，【响应式】vuex的状态存储是响应式的，当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会得到高效更新。
2，【不能直接改变store】不能直接改变store的变化，改变store中状态的唯一途径是commit mutation。方便于跟踪每一个状态的变化。