这是基本应用能力考察,稍微上点规模的项目都要拆分vuex模块便于维护。
https://vuex.vuejs.org/zh/guide/modules.html
const moduleA = { state: () => ({ ... }), mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: () => ({ ... }), mutations: { ... }, actions: { ... } } const store = createStore({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> moduleA 的状态 store.state.b // -> moduleB 的状态 store.getters.c // -> moduleA里的getters store.commit('d') // -> 能同时触发子模块中同名mutation store.dispatch('e') // -> 能同时触发子模块中同名action
modules
选项组织起来:createStore({modules:{...}})
store.state.a.xxx
,但同时getters
、mutations
和actions
又在全局空间中,使用方式和之前一样。如果要做到完全拆分,需要在子模块加上namespace
选项,此时再访问它们就要加上命名空间前缀。本文作者:毛超颖
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!