当我们用vue在开发的过程中，经常会遇到以下问题
多个vue组件共享状态
Vue组件间的通讯
在项目不复杂的时候，我们会利用全局事件bus的方式解决,但随着复杂度的提升，用这种方式将会使得代码难以维护，因此vue官网推荐了一种更好用的解决方案Vuex。
Vuex是什么
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。说直白一点，vuex就是把组件的共享状态抽取出来，以一个全局单例模式管理的数据仓库，里面提供了对应用的数据存储和对数据的操作，维护整个应用的公共数据。
看源代码之前，我们看一下vuex的使用方法
/***code例子*****/
/**
* store.js文件
* 创建store对象，配置state、action、mutation以及getter
*
**/
import Vue from 'vue'
import Vuex from 'vuex'
//注册插件
Vue.use(Vuex)
//创建store仓库
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
/**
* vue-index.js文件
*
*
**/
import Vue from 'vue'
import App from './../pages/app.vue'
import store from './store.js'
//将store挂载到根组件
new Vue({
el: '#root',
router,
store,
render: h => h(App)
})
//app.vue
export default {
computed: {
},
methods: {
increment (obj) {
//组件中调用increment方法
this.$store.dispatch('increment', obj)
}
}
}
整个vuex的使用步骤如下：
1、安装vuex插件
2、创建store状态管理仓库
3、将store注入到vue组件
4、使用dispatch调用action方法
框架核心流程
在分析源代码之前，我们先来看一下整个vuex的运行流程，下面这张图是官方文档中提供的核心思想图
Vue Components：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行dispatch方法触发对应action进行回应。
dispatch：操作行为触发方法，是唯一能执行action的方法。
actions：操作行为处理模块。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行，包括触发其他action以及提交mutation的操作。
commit：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。
mutations：状态改变操作方法。是Vuex修改state的唯一推荐方法
state：页面状态管理容器对象。集中存储Vue components中data对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用Vue的细粒度数据响应机制来进行高效的状态更新。
整体流程：
用户在组件上的交互触发的action，action通过调用（commit）mutations的方法去改变state的状态，而state由于加入了vue的数据响应机制，会导致对应的vue组件更新视图，完成整个状态更新。
目录结构
源代码分析前，首先我们看一下目录结构
module
module-collection.js：创建模块树
Module.js：创建模块
plugins
devtool.js：开发环境工具插件，针对chorme安装 vue-tool 插件
logger.js：state状态改变日志查询
helpers.js：提供mapSate,mapMutations,mapActions,mapGetters 等操作api函数
index.js
index.exm.js：都是入口文件
mixin.js：混入方法，提供将store 仓库挂载到每个vue实例的方法
store.js：整个代码核心，创建store对象
util.js：工具类
Vuex的安装
Vue 通过Vue.use(Vuex)安装vuex, use通过调用vuex对象的install方法将vuex载入，我们看一下install方法的实现：
let Vue // 安装的时候增加vue对象，避免引入vue包
//安装插件
export function install(_Vue) {
//Vue已经被初始化，说明已经安装过，给出提示
if (Vue) {
if (process.env.NODE_ENV !== 'production') {
console.error(
'[vuex] already installed. Vue.use(Vuex) should be called only once.'
)
}
return
}
Vue = _Vue
//安装vuex
applyMixin(Vue)
}
// 自动安装模块
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
这里用了一个比较巧的方法，vue作为参数传入vuex，所以我们不用通过导入vue，代码打包的时候就不会将vue包含进来。
来看下applyMixin方法内部代码
const version = Number(Vue.version.split('.')[0])
//2.0以上用混入
if (version >= 2) {
Vue.mixin({ beforeCreate: vuexInit })
} else {
// override init and inject vuex init procedure
// for 1.x backwards compatibility.
//重写init方法
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 注入
if (options.store) { //根组件
this.$store = typeof options.store === 'function' ?
options.store() : //模块重用
options.store
} else if (options.parent && options.parent.$store) { //其他非根组件注入,向上传递$store，保证任何组件都可以访问到
this.$store = options.parent.$store
}
}
根据不同版本，2.x.x以上版本，使用 hook 的形式进行注入，或使用封装并替换Vue对象原型的_init方法，实现注入。
将初始化Vue根组件时传入的store设置到this对象的$store属性上，子组件从其父组件引用$store属性，层层嵌套进行设置。在任意组件中执行 this.$store 都能找到装载的那个store对象
接下来我们来看状态管理库的创建
我们从构造函数一步一步分析
ModuleCollection构建
if (process.env.NODE_ENV !== 'production') {
assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`) //没有vue对象说明没有注入
assert(typeof Promise !== 'undefined', `vuex requires a Promise polyfill in this browser.`)
assert(this instanceof Store, `Store must be called with the new operator.`)
}
const {
plugins = [], //这个选项暴露出每次 mutation 的钩子。Vuex 插件就是一个函数，它接收 store 作为唯一参数
strict = false //严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误
} = options
let {
state = {} //状态
} = options
if (typeof state === 'function') {
state = state() //状态复用，使用一个函数来声明模块状态
}
// store internal state
this._committing = false //是否在提交状态
this._actions = Object.create(null) //action对象存储
this._mutations = Object.create(null) //mutation对象存储
this._wrappedGetters = Object.create(null) //装后的getters集合对象
this._modules = new ModuleCollection(options) //封装module集合对象
this._modulesNamespaceMap = Object.create(null) //创建命名空间
this._subscribers = []
this._watcherVM = new Vue() //vue实例，Vue组件用于watch监视变化，相当于bus
首先对执行环境做判断，vuex必须已经安装并且支持Promise语法，接下来对输入的参数进行简单的处理以及创建一些属性，用于后续操作，其中有一步操作this._modules = new ModuleCollection(options)，对传入的options进行处理，生成模块集合。来看一下ModuleCollection的操作
constructor(rawRootModule) {
// register root module (Vuex.Store options)
//注册根模块
this.register([], rawRootModule, false)
}
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)
}
// 注册嵌套的模块
if (rawModule.modules) {
forEachValue(rawModule.modules, (rawChildModule, key) => {
this.register(path.concat(key), rawChildModule, runtime)
//this.register(['cart',{cartmodules},runtime])
})
}
}
ModuleCollection主要将传入的options对象整个构造为一个module对象，并循环调用 this.register([key], rawModule, false) 为其中的modules属性进行模块注册，使其都成为module对象，最后options对象被构造成一个完整的状态树。ModuleCollection类还提供了modules的更替功能
modules属性中每一个模块都是一个模块对象，而传入的option会被当成是整个状态树的根模块。
我们接下来看一下了解一下module对象
constructor(rawModule, runtime) {
this.runtime = runtime //运行时间
this._children = Object.create(null) //children子模块
this._rawModule = rawModule //模块内容
const rawState = rawModule.state //模块状态
this.state = (typeof rawState === 'function' ? rawState() : rawState) || {} //state
}
对象是对传入的每一个module参数进行封装，添加了存储的子模块，已达到状态树的构建目的，同时提供一些基本操作的方法。
我们来看一下官网提供的购物车的例子构建完的moduleCollection对象
这个利用树形结构，清晰地表达出了整个数据仓库数据的关系，moduleCollection将成为后期数据和操作重新组织和查找基础。
dispatch和commit函数设置
回到store的构造函数
const store = this
const { dispatch, commit } = this
//dispatch 方法
this.dispatch = function boundDispatch(type, payload) {
return dispatch.call(store, type, payload)
}
//commit 方法
this.commit = function boundCommit(type, payload, options) {
return commit.call(store, type, payload, options)
}
封装dispatch 和commit方法，具体实现如下：
commit(_type, _payload, _options) {
// check object-style commit
const {
type,
payload,
options
} = unifyObjectStyle(_type, _payload, _options)
const mutation = { type, payload }
const entry = this._mutations[type] //变化有没有注册这个类型 commit导致mutation
if (!entry) {
if (process.env.NODE_ENV !== 'production') {
console.error(`[vuex] unknown mutation type: ${type}`)
}
return
}
//处理commit
this._withCommit(() => {
entry.forEach(function commitIterator(handler) {
handler(payload) //mutation操作
})
})
// 订阅者函数遍历执行，传入当前的mutation对象和当前的state
this._subscribers.forEach(sub => sub(mutation, this.state))
//新版本silent去掉了
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'
)
}
}
//触发action
dispatch(_type, _payload) {
// check object-style dispatch
const {
type,
payload
} = unifyObjectStyle(_type, _payload)
const entry = this._actions[type] //触发action配置表
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)
}
dispatch的功能是触发并传递一些参数（payload）给对应type的action。Dispatch提供了两种方法的调用：
所以使用了unifyObjectStyle对传入的参数做了统一化处理。接着找到对应type的action,并逐个执行。
commit方法和dispatch方法大同小异，但是比dispatch复杂一点。每次调用都要对订阅者遍历执行，这个操作的原因后面再解析。同时每次执行mutation方法集合时，都要调用函数_withCommit方法。
_withCommit是一个代理方法，所有触发mutation的进行state修改的操作都经过它，由此来统一管理监控state状态的修改。实现代码如下。
_withCommit(fn) {
const committing = this._committing
this._committing = true
fn()
this._committing = committing
}
每次提交前保存当前commit状态，然后置为true后进行本次操作，操作完成后再还原本次修改之前的状态。我们上面说过mutation是Vuex修改state的唯一推荐方法。这样设置的作用有利于状态的跟踪，state的修改来自于mutation。那是如何跟踪的呢？我们看下面一段代码：
function enableStrictMode(store) {
store._vm.$watch(function() { return this._data.$$state }, () => {
if (process.env.NODE_ENV !== 'production') {
//如果不是通过commit函数，提示
assert(store._committing, `Do not mutate vuex store state outside mutation handlers.`)
}
}, { deep: true, sync: true })
}
这里通过vue $watch 方法监控每一次data的变化，如果在开发环境并且committing为false的话，则表明不是通过mutation操作状态变化，提示非法。同时这也解释了官网要求mutation必须为同步操作state。因为如果异步的话，异步函数调用完成后committing已经还原状态，而回调函数还没调用，$watch还没有接收到data的变化，当回调成功时，committing已经被置为false，不利于状态的跟踪。
模块的安装
接下来，构造函数进行模块的安装
// init root module. 初始化根模块 // this also recursively registers all sub-modules 递归所有子模块 // and collects all module getters inside this._wrappedGetters 把所有的getters对象都收集到Getter里面 installModule(this, state, [], this._modules.root)
我们看一下installModule的具体内容
function installModule(store, rootState, path, module, hot) {
const isRoot = !path.length //是否为根元素
const namespace = store._modules.getNamespace(path) //命名空间
// register in namespace map 如果是命名空间模块，推送到map对象里面
if (module.namespaced) {
store._modulesNamespaceMap[namespace] = module
}
// set state
//将模块的state添加到state链中，是的可以按照 state.moduleName 访问
if (!isRoot && !hot) {
const parentState = getNestedState(rootState, path.slice(0, -1))
const moduleName = path[path.length - 1]
store._withCommit(() => {
//确保属性被创建后也是响应式的
Vue.set(parentState, moduleName, module.state)
})
}
//模块上下文
/*local {
dispatch,
commit,
getters,
state
}
*/
const local = module.context = makeLocalContext(store, namespace, path)
// 注册对应模块的mutation，供state修改使用
module.forEachMutation((mutation, key) => {
const namespacedType = namespace + key
registerMutation(store, namespacedType, mutation, local)
})
// 注册对应模块的action，供数据操作、提交mutation等异步操作使用
module.forEachAction((action, key) => {
const namespacedType = namespace + key
registerAction(store, namespacedType, action, local)
})
// 注册对应模块的getters，供state读取使用
module.forEachGetter((getter, key) => {
const namespacedType = namespace + key
registerGetter(store, namespacedType, getter, local)
})
}
判断是否是根目录，以及是否设置了命名空间，若存在则在namespace中进行module的存储，在不是根组件且不是 hot 条件的情况下，通过getNestedState方法拿到该module父级的state，拿到其所在moduleName，调用 Vue.set(parentState, moduleName, module.state) 方法将其state设置到父级state对象的moduleName属性中，由此实现该模块的state注册。这里建立了一条可观测的data数据链。
接下来定义local变量和module.context的值，执行makeLocalContext方法，为该module设置局部的 dispatch、commit方法以及getters和state，为的是在局部的模块内调用模块定义的action和mutation。也就是官网提供的这种调用方式
定义local环境后，循环注册我们在options中配置的action以及mutation等，这种注册操作都是大同小异，我们来看一下注册mutation的步骤：
/***registerMutation***/
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)
})
}
type作为id，把对应的值函数封装后存储在数组里面，然后作为store._mutations的属性。store._mutations收集了我们传入的所有mutation函数
action和getter的注册也是同理的，只是action handler比mutation handler以及getter wrapper多拿到dispatch和commit操作方法，因此action可以进行dispatch action和commit mutation操作。
注册完了根组件的actions、mutations以及getters后，递归调用自身，为子组件注册其state，actions、mutations以及getters等。
/***子模块代码****/
module.forEachChild((child, key) => {
installModule(store, rootState, path.concat(key), child, hot)
})
/***子模块代码end****/
Store._vm组件安装
执行完各module的install后，执行resetStoreVM方法，进行store组件的初始化。
resetStoreVM(this, state)
function resetStoreVM(store, state, hot) {
const oldVm = store._vm
// bind store public getters
store.getters = {}
const wrappedGetters = store._wrappedGetters
const computed = {}
// 循环所有处理过的getters，并新建computed对象进行存储，通过Object.defineProperty方法为getters对象建立属性，
//使得我们通过this.$store.getters.xxxgetter能够访问到该getters
forEachValue(wrappedGetters, (fn, key) => {
// use computed to leverage its lazy-caching mechanism
computed[key] = () => fn(store)
Object.defineProperty(store.getters, key, {
get: () => store._vm[key],
enumerable: true // for local getters
})
})
// use a Vue instance to store the state tree
// suppress warnings just in case the user has added
// some funky global mixins
const silent = Vue.config.silent
Vue.config.silent = true
// 设置新的storeVm，将当前初始化的state以及getters作为computed属性（刚刚遍历生成的）
store._vm = new Vue({
data: {
$$state: state //相当于总线
},
computed
})
Vue.config.silent = silent
// enable strict mode for new vm
// 该方法对state执行$watch以禁止从mutation外部修改state
if (store.strict) {
enableStrictMode(store)
}
// 若不是初始化过程执行的该方法，将旧的组件state设置为null，
//强制更新所有监听者(watchers)，待更新生效，DOM更新完成后，执行vm组件的destroy方法进行销毁，减少内存的占用
if (oldVm) {
if (hot) {
// dispatch changes in all subscribed watchers
// to force getter re-evaluation for hot reloading.
store._withCommit(() => {
oldVm._data.$$state = null
})
}
Vue.nextTick(() => oldVm.$destroy())
}
}
resetStoreVm方法创建了当前store实例的_vm组件，至此store就创建完毕了
plugin注入
最后执行plugin插件
//打印变化前后的值
plugins.forEach(plugin => plugin(this))
//如果配置了开发者工具
if (Vue.config.devtools) {
devtoolPlugin(this)
}
Plugins.foreach 默认执行了createlogger方法，我们来看createLogger的实现代码：
export default function createLogger({
collapsed = true,
filter = (mutation, stateBefore, stateAfter) => 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)
if (filter(mutation, prevState, nextState)) {
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
})
}
}
createLogger通过store.subscribe将方法添加到订阅，待触发的时候调用。这里通过前后state状态的打印对比，跟踪状态变更。
devtoolPlugin则是对vue-tool控制台信息的添加监控
mapSate,mapMutations,mapActions,mapGetters函数实现
Vuex还提供了mapSate,mapMutations,mapActions,mapGetters辅助函数来帮助我们生成计算属性和对应方法。下面用mapMutations为例来分析一下实现过程
首先看调用的方式：
import { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
// `mapMutations` 也支持载荷：
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
]),
...mapMutations({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
}),
...mapMutations('some/nested/module', [ //在模块some/nested/module查看
'foo', //将 `this.increment()` 映射为 `this.$store.commit('some/nested/module/foo')`
'bar'
])
}
}
看一下源代码：
export const mapMutations = normalizeNamespace((namespace, mutations) => {
const res = {}
normalizeMap(mutations).forEach(({ key, val }) => {
val = namespace + val
res[key] = function mappedMutation(...args) {
if (namespace && !getModuleByNamespace(this.$store, 'mapMutations', namespace)) {
return
}
return this.$store.commit.apply(this.$store, [val].concat(args))
}
})
return res
})
//返回对象数组 key-value
function normalizeMap(map) {
return Array.isArray(map) ?
map.map(key => ({ key, val: key })) :
Object.keys(map).map(key => ({ key, val: map[key] }))
}
//处理命名空间参数问题
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 getModuleByNamespace(store, helper, namespace) {
const module = store._modulesNamespaceMap[namespace]
if (process.env.NODE_ENV !== 'production' && !module) {
console.error(`[vuex] module namespace not found in ${helper}(): ${namespace}`)
}
return module
}
其实就是用normalizeNamespace和normalizeMap去统一化参数，生成key-value的对象组，然后对函数惊醒封装，调用commit方法。
至此，整个vuex的源码核心就分析完成。源码中还有一些工具函数类似registerModule、unregisterModule、hotUpdate、watch以及subscribe等，这些方法都是对上面代码行为的封装调用，然后暴露出来的接口，都比较容易理解。
链接：https://www.cnblogs.com/caizhenbo/p/7380200.html