modules: { foo: { namespaced: true, getters: { // 在这个模块的 getter 中，`getters` 被局部化了 // 你可以使用 getter 的第四个参数来调用 `rootGetters` someGetter (state, getters, rootState, rootGetters) { getters.someOtherGetter // -> 'foo/someOtherGetter 模块内的 getter' rootGetters.someOtherGetter // -> 'someOtherGetter 全局的getter' }, someOtherGetter: state => { ... } }, actions: { // 在这个模块中， dispatch 和 commit 也被局部化了 // 他们可以接受 `root` 属性以访问根 dispatch 或 commit someAction ({ dispatch, commit, getters, rootGetters }) { getters.someGetter // -> 'foo/someGetter' rootGetters.someGetter // -> 'someGetter' dispatch('someOtherAction') // -> 'foo/someOtherAction' 模块内的 action dispatch('someOtherAction', null, { root: true }) // ->'someOtherAction' 全局的 action commit('someMutation') // -> 'foo/someMutation' 模块内的 action commit('someMutation', null, { root: true }) // -> 'someMutation' 全局 mutation }, someOtherAction (ctx, payload) { ... } } } }
3.2.3 将模块内的 action 注册为全局
这个感觉和维护模块的封装性有点冲突，但是既然作者提出来了，那就学吧，当我们想要我们模块内的某个 action 提升为全局 action 的时候，在他声明的时候，添加 root: true，并将 action 的定义放到 hanler 函数中，具体如下：
const actions = { // 模块内 action [ASET_AGE]({ commit }, payload) { setTimeout(() => { commit('SET_B_NAME', payload.name); }, 2000) }, // 提升到全局的 action globalAction: { root: true, handler({ commit }, payload) { debugger setTimeout(() => { commit('SET_B_NAME', payload.name); }, 2000) } } }
关于模块使用 Vuex 的介绍就说到这里了，这两篇笔记的项目源码我发到了 GitHub 上面，大家可以去看一下，要是项目中有啥不明白的或者我说的有问题的，欢迎大家留言指正。