Vuex源码分析(五)-- actions
官方描述
Action
类似于mutation
,不同在于:
Action
提交的是mutation
,而不是直接变更状态。Action
可以包含任意异步操作。
让我们来注册一个简单的 action:
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
// context = {dispatch, commit, getters, state, rootGetters, rootState}
increment (context) {
context.commit('increment')
}
}
})
从这里可以看出,context
有6个属性分别是dispatch, commit, getters, state, rootGetters, rootState
。你也许会觉得奇怪,为什么getters
与state
有各自的root
信息,而dispatch
与commit
没有?
因为:dispatch
, commit
是方法,可以通过传递参数指向对应的root
方法,即store.dispatch(type, payload, {root: true})
;而getters
与state
是属性,不能传参,所以重新引入了rootGetters
, rootState
属性
源码分析
构造函数store
和mutations
一样,核心方法都在 installModule
方法中。
export class Store {
constructor (options = {
}) {
...
// 生成state模型
this._modules = new ModuleCollection(options)
const state = this._modules.root.state
// 处理[state, getters, mutations, actions]的核心方法
installModule(this, state, [], this._modules.root)
...
}
}
installModule
这段代码主要是将原始 actions 对象封装到store上
function installModule (store, rootState, path, module, hot) {
const namespace = store._modules.getNamespace(path)
// 生成本地local对象
const local = module.context = makeLocalContext(store