vuex-Module

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Vuex 允许将 store 分割成模块（module）。

每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态//对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象。

const moduleA = {
state: { count: },
mutations: {
increment (state) {
// 这里的 `state` 对象是模块的局部状态
state.count++
}
}, getters: {
doubleCount (state) {
return state.count *
}
}
}

//对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState：

const moduleA = {
// ...
actions: {
incrementIfOddOnRootSum ({ state, commit, rootState }) {
if ((state.count + rootState.count) % === ) {
commit('increment')
}
}
}
}

//对于模块内部的 getter，根节点状态会作为第三个参数暴露出来：

const moduleA = {
// ...
getters: {
sumWithRootCount (state, getters, rootState) {
return state.count + rootState.count
}
}
}

//可以通过添加 namespaced: true 的方式使其成为命名空间模块。

const store = new Vuex.Store({
modules: {
account: {
namespaced: true, // 模块内容（module assets）
state: { ... }, // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
getters: {
isAdmin () { ... } // -> getters['account/isAdmin']
},
actions: {
login () { ... } // -> dispatch('account/login')
},
mutations: {
login () { ... } // -> commit('account/login')
}, // 嵌套模块
modules: {
// 继承父模块的命名空间
myPage: {
state: { ... },
getters: {
profile () { ... } // -> getters['account/profile']
}
}, // 进一步嵌套命名空间
posts: {
namespaced: true, state: { ... },
getters: {
popular () { ... } // -> getters['account/posts/popular']
}
}
}
}
}
})
//启用了命名空间的 getter 和 action 会收到局部化的 getter，dispatch 和 commit

//在命名空间模块内访问全局内容（Global Assets）
//如果你希望使用全局 state 和 getter，rootState 和 rootGetter 会作为第三和第四参数传入 getter，也会通过 context 对象的属性传入 action。
//若需要在全局命名空间内分发 action 或提交 mutation，将 { root: true } 作为第三参数传给 dispatch 或 commit 即可

modules: {
foo: {
namespaced: true, getters: {
// 在这个模块的 getter 中，`getters` 被局部化了
// 你可以使用 getter 的第四个参数来调用 `rootGetters`
someGetter (state, getters, rootState, rootGetters) {
getters.someOtherGetter // -> 'foo/someOtherGetter'
rootGetters.someOtherGetter // -> 'someOtherGetter'
},
someOtherGetter: state => { ... }
}, actions: {
// 在这个模块中， dispatch 和 commit 也被局部化了
// 他们可以接受 `root` 属性以访问根 dispatch 或 commit
someAction ({ dispatch, commit, getters, rootGetters }) {
getters.someGetter // -> 'foo/someGetter'
rootGetters.someGetter // -> 'someGetter' dispatch('someOtherAction') // -> 'foo/someOtherAction'
dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction' commit('someMutation') // -> 'foo/someMutation'
commit('someMutation', null, { root: true }) // -> 'someMutation'
},
someOtherAction (ctx, payload) { ... }
}
}
}

//当使用 mapState, mapGetters, mapActions 和 mapMutations 这些函数来绑定命名空间模块时，写起来可能比较繁琐,可以将模块的空间名称字符串作为第一个参数传递给上述函数，这样所有绑定都会自动将该模块作为上下文。computed: {
...mapState('some/nested/module', {
a: state => state.a,
b: state => state.b
})
},
methods: {
...mapActions('some/nested/module', [
'foo',
'bar'
])
}

//也可以通过使用 createNamespacedHelpers 创建基于某个命名空间辅助函数。它返回一个对象，对象里有新的绑定在给定命名空间值上的组件绑定辅助函数：import { createNamespacedHelpers } from 'vuex'const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')

export default {
computed: {
// 在 `some/nested/module` 中查找
...mapState({
a: state => state.a,
b: state => state.b
})
},
methods: {
// 在 `some/nested/module` 中查找
...mapActions([
'foo',
'bar'
])
}
}

插件的命名空间

// 通过插件的参数对象得到空间名称
// 然后返回 Vuex 插件函数

export function createPlugin (options = {}) {
return function (store) {
// 把空间名字添加到插件模块的类型（type）中去
const namespace = options.namespace || ''
store.dispatch(namespace + 'pluginAction')
}
}

模块动态注册

// 注册模块 `myModule`
store.registerModule('myModule', {
// ...
})
// 注册嵌套模块 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
// ...
})

//使用其他 Vue 插件可以通过在 store 中附加新模块的方式来使用 Vuex 管理状态//使用 store.unregisterModule(moduleName) 来动态卸载模块，但不能用于静态模块（即创建 store 时声明的模块）。//在注册一个新 module 时，你很有可能想保留过去的 state
store.registerModule('a', module, { preserveState: true })。

创建一个模块的多个实例,不能用纯对象来声明模块的状态，否则状态对象被修改时 store 或模块间数据互相污染。

这和 Vue 组件内的 data 是同样的问题。因此解决办法也是相同的——使用一个函数来声明模块状态

const MyReusableModule = {
state () {
return {
foo: 'bar'
}
},
// mutation, action 和 getter 等等...
}