Vuex是什么？
大家可以先把github上的 vuex项目 clone下来或者直接下载下来用编辑器打开
git clone https://github.com/vuejs/vuex.git
Vuex项目目录
项目的目录结构很清晰，重点会解析
module-collection.js module.js index.js mixin.js store.js这几个js文件。
当我们要使用vuex管理状态的时候就要规划好vuex的结构目录了，对于大型的vue应用官方也有推荐的项目结构:
├── index.html
├── main.js
├── api
│ └── ... # 抽取出API请求
├── components
│ ├── App.vue
│ └── ...
└── store
├── index.js # 我们组装模块并导出 store 的地方
├── actions.js # 根级别的 action
├── mutations.js # 根级别的 mutation
└── modules
├── cart.js # 购物车模块
└── products.js # 产品模块
结构中store目录下面的index.js文件就是用来生成一个管理状态store对象
通常我们会在store/index.js文件中敲入这些代码
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mucations from './mucations'
import * as actions from './actions'
import * as getters from './getters'
const debug = process.env.NODE_ENV !== 'production'
Vue.use(Vuex)
export default new Vuex.Store({
state,
mucations,
actions,
getters,
strict: debug
})
import Vuex from 'vuex' 就是导入Vuex项目中的入口文件index.js中的接口
到这边就要对Vuex项目中的源码进行不完全解析，让我们回到Vuex项目中
入口
// index.js
import { Store, install } from './store'
import { mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers } from './helpers'
export default {
Store,
install,
version: '__VERSION__',
mapState,
mapMutations,
mapGetters,
mapActions,
createNamespacedHelpers
}
这个就是Vuex对外暴露的接口，其中 Store就是Vuex提供的状态管理类，稍后会进行介绍，再来看看install，这个函数会在Vue.use(Vuex)的时候调用。
查看src/store.js里面的install
export function install (_Vue) {
if (Vue && _Vue === Vue) {
if (process.env.NODE_ENV !== 'production') {
console.error(
'[vuex] already installed. Vue.use(Vuex) should be called only once.'
)
}
return
}
Vue = _Vue
applyMixin(Vue)
}
_Vue就是Vue.use(Vuex)调用install的时候传入的Vue引用，在index.js开头会定义一个局部的Vue引用，用于Vuex中使用
// ...
let Vue // bind on install
// ...
在执行install的时候会判断局部Vue引用是否跟传入的Vue引用是一样的，如果是一样的说明Vuex已经加载了，在非生产环境下会报错，否则让局部Vue也指向传来的Vue，便于Vuex内部使用Vue，函数的最后，又调用了applyMixin(Vue)，这个函数是实现通过this.$store.xxx这种方式来访问数据和管理数据，具体怎么实现查看在src/mixin.js代码
// mixin.js
export default function (Vue) {
const version = Number(Vue.version.split('.')[0])
if (version >= 2) {
Vue.mixin({ beforeCreate: vuexInit })
} else {
// override init and inject vuex init procedure
// for 1.x backwards compatibility.
const _init = Vue.prototype._init
Vue.prototype._init = function (options = {}) {
options.init = options.init
? [vuexInit].concat(options.init)
: vuexInit
_init.call(this, options)
}
}
由于vue1.x和vue2.x的生命周期钩子有不同，所以会进行版本的判断，让vue在初始化（vue2.x是beforeCreate，vue1.x是init）钩子函数数组中mixin一个vuexInit函数，实现Vue组件初始化的时候执行vueInit往vue组件中注入$store这样我们就可以在vue组件中使用 this.$store.xxx访问到store管理对象中的数据和方法，具体怎么在vue组件中注入$store属性，查看vuexInit函数中的代码
/**
* Vuex init hook, injected into each instances init hooks list.
*/
function vuexInit () {
const options = this.$options
// store injection
if (options.store) {
this.$store = typeof options.store === 'function'
? options.store()
: options.store
} else if (options.parent && options.parent.$store) {
this.$store = options.parent.$store
}
}
上面这段代码会在Vue组件初始化的时候被调用，他会从构造这个vue实例的options参数中判断是否含有store属性，如果有则把这个store注入到vue实例的$store属性中，就比如说我们vue应用的整个项目的入口文件是main.js里面的代码是
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
就main.js中创建的vue组件其实是最顶层的vue组件<Root></Root>，这里的if (options.store)就是判断在new Vue({...})传给Vue构造函数的参数也就是options中是否有store这个对象，如果有就注入到这个顶层vue实例的$store的属性中，这时候最顶层的vue组件<Root><App>...</App></Root>Root中就包含了$store，因为每个vue组件被创建之前都会调用beforeCreat/Init生命周期下的所有函数，包括被mixin到里面的vuexInit所以当App组件被创建的时候，他本身的options参数是没有store的，而
else if (options.parent && options.parent.$store)他会去判断是否含有父组件，这里App的父组件就是Root组件了，而Root有$store属性所以把父组件的这个属性的引用赋值给App这个组件的$store，这样就达到每个vue组件创建的时候都能拿到store，一级一级的传下去。
看到这里也不是说store只能在最顶层的组件出现，这样是为了在这个项目的所有vue组件都能通过这个状态管理来管理数据，store是可以在任何一个实例化vue组件的options中出现的，只不过这样只能在当前组件和其子孙组件中使用store而已。可以采用Bus等来实现没必要用Vuex。
到这边就实现了 为什么我们在组件中可以使用this.$store.xxx来访问数据，管理数据来。
Store类
接下来针对具体怎么实现状态管理来解析代码
回到store.js中对Store类进行解析，这个是用来实例化一个store对象的也就是this.$store.xxx中的store
constructor (options = {}) {
// Auto install if it is not done yet and `window` has `Vue`.
// To allow users to avoid auto-installation in some cases,
// this code should be placed here. See #731
if (!Vue && typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
if (process.env.NODE_ENV !== 'production') {
assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`)
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 = [],
strict = false
} = options
// store internal state
this._committing = false
this._actions = Object.create(null)
this._actionSubscribers = []
this._mutations = Object.create(null)
this._wrappedGetters = Object.create(null)
this._modules = new ModuleCollection(options)
this._modulesNamespaceMap = Object.create(null)
this._subscribers = []
this._watcherVM = new Vue()
// bind commit and dispatch to self
const store = this
const { dispatch, commit } = this
this.dispatch = function boundDispatch (type, payload) {
return dispatch.call(store, type, payload)
}
this.commit = function boundCommit (type, payload, options) {
return commit.call(store, type, payload, options)
}
// strict mode
this.strict = strict
const state = this._modules.root.state
// init root module.
// this also recursively registers all sub-modules
// and collects all module getters inside this._wrappedGetters
installModule(this, state, [], this._modules.root)
// initialize the store vm, which is responsible for the reactivity
// (also registers _wrappedGetters as computed properties)
resetStoreVM(this, state)
// apply plugins
plugins.forEach(plugin => plugin(this))
const useDevtools = options.devtools !== undefined ? options.devtools : Vue.config.devtools
if (useDevtools) {
devtoolPlugin(this)
}
}
在构建一个 store实例之前要确保Vuex已经被加载，所以一开始的
if (!Vue && typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
这段代码判断没加载就调用install函数加载Vuex原理和上面解析install的时候一样。
下面的代码是用来判断依赖
if (process.env.NODE_ENV !== 'production') {
assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`)
assert(typeof Promise !== 'undefined', `vuex requires a Promise polyfill in this browser.`)
assert(this instanceof Store, `store must be called with the new operator.`)
}
里面的assert是他们自己实现的一个断言函数，代码比较简单，可以查看utils.js里面的函数实现。
先判断Vue因为里面用到的比如刚才的往组件中注入$store属性或者等下要介绍的数据监听等等功能都依赖Vue。还要断言环境是否支持Promise，在actions中会用到Promise所以Promise也必须被支持，最后一个断言是 当前的store对象，必须是通过Store类创建的。
const {
plugins = [],
strict = false
} = options
这段代码则是通过ES6的解构赋值，把构造store store = new Vuex.Store({...})时候的参数options，赋值成局部可引用的变量
// store internal state
this._committing = false
this._actions = Object.create(null)
this._actionSubscribers = []
this._mutations = Object.create(null)
this._wrappedGetters = Object.create(null)
this._modules = new ModuleCollection(options)
this._modulesNamespaceMap = Object.create(null)
this._subscribers = []
this._watcherVM = new Vue()
_committing:用来判断是否是通过commit来实现更改数据因为commit是修改state中数据的唯一合法途径
_actions:存放把我们store/actions下面编写的所有action函数通过注册后的函数集合，就是注册后的action
_actionSubscribers:订阅了action变化的订阅者集合
_mutations:存放把我们store/mutations下面编写的所有mutation函数通过注册后的函数集合，就是注册后的mutation
_wrappedGetters: 对我们编写的getters函数进行包装后的函数，用于组册getters
_modules:当我们的项目很庞大的时候，很多数据都要用状态管理，这时候把所有的数据都存在一个store进行管理会显得臃肿而且复杂，变得难以管理，所以Vuex提供了module，也就是每个module下包含各自的state，actions，getters，mutations。他是根据ModuleCollection这个类生产一个module树，接下来会对这个类进行解析
_modulesNaspaceMap:用于存放命名空间下对应的module
_subscribers:用来存储所有对 mutation 变化的订阅者
_watcherVM:一个vue实例，利用vue的watch来监测state数据的变化
至于Object.create(null)是创建一个空对象但是又有别于var obj = {}中这种通过字面量创建的空对象，因为Object.create(null)创建的空对象的__proto__是指向null的，Object.create创建对象的大概过程就是:
function (o) {
var F = function () {}
F.prototype = o
var f = new F()
return f
}
this._modules = new ModuleCollection(options)
通过把options也就是创建store时候的参数传给ModuleCollection构建module树
// module-collection.js
constructor (rawRootModule) {
// register root module (Vuex.Store options)
this.register([], rawRootModule, false)
}
这个是ModuleCollection的构造器，rawRootModule就是我们前面传将来的options，构造器通过调用register()函数来注册module构建module树
// module-collection.js
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)
})
}
}
比如我们一开始传过来的参数是register([], rawRootModule, false)第一个参数是用来表示也可以说是层级关系，rawModule则是用于构造一个module所用的参数，runtime表示mudule是否是运行时。
我们先分析为根module的情况，也就是rawModule为构建store时候传进来的option，一开始也是先对传进来的rawModule先做断言，看是不是符合构造一个module，这边的代码也是比较好理解的这边就不解析了。
通过 const newModule = new Module(rawModule, runtime)创建一个module对象
来看看Module代码
// module.js
constructor (rawModule, runtime) {
this.runtime = runtime
// Store some children item
this._children = Object.create(null)
// Store the origin module object which passed by programmer
this._rawModule = rawModule
const rawState = rawModule.state
// Store the origin module's state
this.state = (typeof rawState === 'function' ? rawState() : rawState) || {}
}
设置这个module的运行时状态为false，因为一开始这个根module的子module还没注册所以为空，所以先this.children = Object.create(null)赋值个空对象，还有设置这个module的state属性，也就是根module的state。
然后再回到module-collection.js中，这时候这个 newModule就是根module了，因为一开始path === []所以设置这个store的root为根module。接下来会判断这个rawModule是否配置了子module，如果没有则整个module就一个root module，如果有子module，forEachValue也是他们自己封装的枚举对象的，具体可以查看 utils.js他把rawModule.modules的对象当作构建子module的参数，还有把当前子module的key放到path中递归调用register从而实现module树的构建。假如刚才创建的root还存在子module的话，第二次调用register，假设rawModule.modules存在moa: {...}这样一个module配置的话，那么第二次调用register传进去的参数就是，register(['moa'], moa, runtime)然后再通过 new Module() 创建一个module对象，然而这时候path.length !== 0
通过const parent = this.get(path.slice(0, -1))来获取moa这个module的父module
get (path) {
// module-collection.js
return path.reduce((module, key) => {
return module.getChild(key)
}, this.root)
}
这段代码就是用来获取当前module的父module，因为要找父module肯定不能包含自己，所以通过path.slice(0, -1)传到get函数中的时候就不包含自己了，由于这时候get中path为空数组所以直接返回this.root就是根module，这时候parent === this.root为true，然后在这个父module中的_childre添加当前的newModule，key就是moa，这时候root就有子module了。递归直到没有其他module配置为止，就完成了module树的构建。
现在再回到store.js这个文件中，
this._modules = new ModuleCollection(options)这个_modules就是刚才构建出来的module树了。
// store.js
// bind commit and dispatch to self
const store = this
const { dispatch, commit } = this
this.dispatch = function boundDispatch (type, payload) {
return dispatch.call(store, type, payload)
}
this.commit = function boundCommit (type, payload, options) {
return commit.call(store, type, payload, options)
}
让store这个局部变量指向store对象，然后对store里面的dispatch和commit绑定当前的store对象。也就是这两个函数里面的this都是指向这个store对象
// store.js
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]
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)
})
})
this._subscribers.forEach(sub => sub(mutation, this.state))
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'
)
}
}
利用unifyObjectStyle这个函数来统一参数，因为我们commit的时候有两种参数方式具体可以查看Vuex的官网。
通过参数构建一个mutation对象，从组册的mutatons中通过type也就是我们定义mutation时候的函数名字，拿到同名的mutation集合entry，为什么说同名呢，下面在安装module的时候会讲到，会先对这entry进行判断如果没有这个mutation则报错，接下来会调用，_withCommit()这个函数进行state的改变，传进一个遍历执行对于mutation的函数其中payload就是我们定义mutation时候的函数的参数。
_withCommit (fn) {
const committing = this._committing
this._committing = true
fn()
this._committing = committing
}
其实这个函数不复杂，我们在commit的时候去改变_committing的状态，为true则表示正在通过commit方式改变state，用于在watch监听数据改变的时候判断是否是通过commit来改变的。然后执行我们注册的mutation函数。
回到commit函数this._subscribers.forEach(sub => sub(mutation, this.state))遍历通知订阅了mutation的订阅者，传入最新的state。
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
}
this._actionSubscribers.forEach(sub => sub(action, this.state))
return entry.length > 1
? Promise.all(entry.map(handler => handler(payload)))
: entry[0](payload)
}
dispatch一开始跟commit是类似的，不同的是最后return那边，会先判断同名的action有几个，如果是一个就是直接执行entry中的第一个action，如果大于一个，我们都知道我们可以在action中进行异步的操作，所以如果action中有reutrn数据的话，由于异步的关系，你return出来的数据不一定是你想要的结果，所以在组册action的时候他的包装函数会把不是Promise结果处理成Promise，Promise.all()，用来确保全部的注册的action函数执行，也就是状态都是resolve否则dispatch不会返回正确的值。所以你获取到var d = dispatch(xxx,xxx)值后可以通过d.then(res => {})来获取对于同名的action集合return的值就是res是个数组，所以这边就解释了为什么一开始要判断是否支持Promise了，Promise也是属于ES6的内容。
接着回到Store的构造器中
// strict mode
this.strict = strict
const state = this._modules.root.state
如果开启严格模式的话，Vuex就会监听数据的改变是否是通过commit。
然后把root moudle的状态赋值给一个局部变量
// init root module.
// this also recursively registers all sub-modules
// and collects all module getters inside this._wrappedGetters
installModule(this, state, [], this._modules.root)
这边开始安装modules，我们一开始只是构建了module树，但是mutations，actions，getters都还没注册，而且如果含有多个module的话，状态state树也还没构建。通过installModule函数来完成这些事情。
function installModule (store, rootState, path, module, hot) {
const isRoot = !path.length
const namespace = store._modules.getNamespace(path)
// register in namespace map
if (module.namespaced) {
store._modulesNamespaceMap[namespace] = module
}
// 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, module.state)
})
}
const local = module.context = makeLocalContext(store, namespace, path)
module.forEachMutation((mutation, key) => {
const namespacedType = namespace + key
registerMutation(store, namespacedType, mutation, local)
})
module.forEachAction((action, key) => {
const type = action.root ? key : namespace + key
const handler = action.handler || action
registerAction(store, type, handler, local)
})
module.forEachGetter((getter, key) => {
const namespacedType = namespace + key
registerGetter(store, namespacedType, getter, local)
})
module.forEachChild((child, key) => {
installModule(store, rootState, path.concat(key), child, hot)
})
}
安装module也是从根module开始 也就是从root开始，参数中，store为当前store对象，rootState为root的state，path就是用来记录module层级关系，module当前要安装的module，hot为热更新。
当安装root module的时候，通过path判断是否是根module，获得当前module的命名空间，比如我之前root下面还有一个moa的module，如果这个module的namespaced为true的时候得到的命名空间就是moa/。如果moa下面还有一个moa1的module，他的namespaced也为true那么这个moa1的命名空间就是moa/moa1/，所以要把当前module的名称加到命名空间中必须当前module的namespaced = true才可以，比如说moa他的namespaced 为 false 那么moa的命名空间为空，而且moa1的namespaced为true，那么moa1的命名空间为moa1/这样moa就没有出现在命名空间中。
因为我们当前是根module所以 namespace 为空，他设置namespaced也没有意义
// register in namespace map
if (module.namespaced) {
store._modulesNamespaceMap[namespace] = module
}
这三行代码是把如果定义了命名空间，就把当前的module放入这个_modulesNamespaceMap集合中，key为命名空间，value为当前module
接下来因为不是根module所以这个代码等到安装子module的时候解析
const local = module.context = makeLocalContext(store, namespace, path)这行代码的作用就是用来生成，当前module的上下文对象，生成当前module下的dispatch，commit，getters，state
/**
* make localized dispatch, commit, getters and state
* if there is no namespace, just use root ones
*/
function makeLocalContext (store, namespace, path) {
const noNamespace = namespace === ''
const local = {
dispatch: noNamespace ? store.dispatch : (_type, _payload, _options) => {
const args = unifyObjectStyle(_type, _payload, _options)
const { payload, options } = args
let { type } = args
if (!options || !options.root) {
type = namespace + type
if (process.env.NODE_ENV !== 'production' && !store._actions[type]) {
console.error(`[vuex] unknown local action type: ${args.type}, global type: ${type}`)
return
}
}
return store.dispatch(type, payload)
},
commit: noNamespace ? store.commit : (_type, _payload, _options) => {
const args = unifyObjectStyle(_type, _payload, _options)
const { payload, options } = args
let { type } = args
if (!options || !options.root) {
type = namespace + type
if (process.env.NODE_ENV !== 'production' && !store._mutations[type]) {
console.error(`[vuex] unknown local mutation type: ${args.type}, global type: ${type}`)
return
}
}
store.commit(type, payload, options)
}
}
// getters and state object must be gotten lazily
// because they will be changed by vm update
Object.defineProperties(local, {
getters: {
get: noNamespace
? () => store.getters
: () => makeLocalGetters(store, namespace)
},
state: {
get: () => getNestedState(store.state, path)
}
})
return local
}
参数store为当前的store对象， namespace为当前module的命名空间，path则是用来在state中找到当前module的state。因为在Vuex中没有设置命名空间的话，actions,mutations,getters默认都是组册在全局里面的。具体会在讲解注册他们的时候分析。
local就是为对应module的actions,mucations,getters,state提供的上下文对象。
不要忘了我们一开始是安装root module所以是没有命名空间的，所以当前module就是store一开始提供的dispatch，而这个dispatch函数默认执行的是全局的action，如果是有命名空间的module下的dispatch，他对store一开始的dispatch又包装了一层，作用就是自动加上命名空间，这样我们在module里面dispatch的时候只要写action的type就可以对应到这个module下的action而不是全局的，再来看看这个有命名空间下的dispatch多了一个_options参数，这个作用就是实现dispatch('someOtherAction', null, { root: true })这种方式来分发全局里面的action。判断完后再调用store一开始提供的dispatch来分发actionreturn store.dispatch(type, payload)因为这时候的type已经结果判断是否有加上命名空间了。commit的原理也是类似的。然后再用Object.defineProperties(....)在local添加经过命名空间判断后的getters和state，对于getters的话没有命名空间的话就返回store.getters有命名空间的话通过命名空间获取当前module下的getters，来看看makeLocalGetters这个函数
function makeLocalGetters (store, namespace) {
const gettersProxy = {}
const splitPos = namespace.length
Object.keys(store.getters).forEach(type => {
// skip if the target getter is not match this namespace
if (type.slice(0, splitPos) !== namespace) return
// extract local getter type
const localType = type.slice(splitPos)
// Add a port to the getters proxy.
// Define as getter property because
// we do not want to evaluate the getters in this time.
Object.defineProperty(gettersProxy, localType, {
get: () => store.getters[type],
enumerable: true
})
})
return gettersProxy
}
这个函数就是，从store中注册的getters中，因为getters是一个对象，key是命名空间加我们定义的getters的名字，比如moa/moa1/getusername其中moa/moa1是命名空间，getusername是我们定义的getters的名字。所以我们在一个module中调用getters的时候，也不用带上命名空间。
对于state的话调用了getNestedState来获取当前module的state
function getNestedState (state, path) {
return path.length
? path.reduce((state, key) => state[key], state)
: state
}
这个函数就是用来从state树中来找到对于module的state。
回到makeLocalContext函数中，他最终返回这个module的上下文对象。用于在注册actions，mutations，getters中用到。
回到installModule函数中，接下来的三个函数就是用于注册
module.forEachMutation((mutation, key) => {
const namespacedType = namespace + key
registerMutation(store, namespacedType, mutation, local)
})
module.forEachAction((action, key) => {
const type = action.root ? key : namespace + key
const handler = action.handler || action
registerAction(store, type, handler, local)
})
module.forEachGetter((getter, key) => {
const namespacedType = namespace + key
registerGetter(store, namespacedType, getter, local)
})
先来说说注册mutation他在store的_mutations中注册的名字就是命名空间+我们定义的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)
})
}
功能很简单，这边我们会知道，原来store中注册的_mutations的值是以数组存放的，这也是为什么如果你没有定义命名空间的module下面commit_mutations中注册的同名mutation的时候，其他的在同个命名空间下的mutation一起执行的原因了。回到代码中，我们编写的，mutation会经过一个包装函数包装，其中handler，就是我们编写的mutation，这里也会知道为什么我们编写mutation的时候，参数中的state就是当前module下定义的state，而payload就是我们commit的时候带的参数。
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)
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
}
})
}
在registerAction中其实也是跟registerCommit差不多的实现。这里面我们也会看到，为什么我们在编写action的时候，参数中{dispatch,commit,getters,state,rootGetters,rootState}是怎么来的了，其实cb很少用到，这里的包装函数也会把你返回的结果包装成Promise，在解析dispatch的时候也有提到。
function registerGetter (store, type, rawGetter, local) {
if (store._wrappedGetters[type]) {
if (process.env.NODE_ENV !== 'production') {
console.error(`[vuex] duplicate getter key: ${type}`)
}
return
}
store._wrappedGetters[type] = function wrappedGetter (store) {
return rawGetter(
local.state, // local state
local.getters, // local getters
store.state, // root state
store.getters // root getters
)
}
}
这里跟注册mutations和actions不同的地方就是他不能重复。其他地方差不多。但是其实这里的getters还没有真正的注册完成，这时候我们this.$store.getters是没有东西的。这个会在 《不完全解析Vuex源码（二）》中会提到。
再次回到installModule函数中，最后回去遍历module树中的子module，如果有就继续安装
module.forEachChild((child, key) => {
installModule(store, rootState, path.concat(key), child, hot)
})
跟安装root module不同的是installModule中的这几行代码
// 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, module.state)
})
}
作用就是构建store的state树，先获取到当前module的父state，然后在父的state下面加入当前module的state，key就module名称，value就是当前module的state。这里我们也会看到commit是改变state的唯一合法途径了。
到这边完成了actions,mutations,getters的注册（getters其实不能说是真正的注册）module树的安装。还有很重要的一部分就是利用Vue的功能实现数据的响应，和监测将在（二）中解析。
答应我一定要在会用Vuex的前提下再去看源码。
网友评论