（四十一）Vuex之模块化与命名空间

文章目录

模块化
命名空间
模块动态注册
- 保留 state
模块重用

上一篇：（四十）vuex之四个map辅助函数

模块化

在复杂的应用中，为了解决 Vuex store 对象变得臃肿的问题，可以使用 Vuex 模块（module）来对 store 进行分割。每个模块都具有自己的 state、mutation、action 和 getter，甚至可以包含嵌套的子模块。

通过将 store 分割成模块，可以实现以下优势：

逻辑分离：将相关的状态、变更、行为和计算逻辑组织在一个模块中，使代码更具可读性和可维护性。每个模块只关注自己的状态和操作，减少了模块间的耦合性。
可扩展性：通过模块化的方式，可以更方便地扩展和修改应用的状态。当应用变得复杂时，可以通过添加新的模块来处理新的功能需求，而不必修改现有的模块。
命名空间：每个模块都具有自己的命名空间，防止不同模块之间的命名冲突。这样可以更好地组织和管理应用的状态，避免命名冲突引发的问题。

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 的状态

命名空间

命名空间是 Vuex 中用于解决模块化命名冲突的机制。当多个模块具有相同的 mutation、action 或 getter 名称时，使用命名空间可以确保它们在调用时不会发生冲突。

在 Vuex 模块中，默认情况下，mutation、action 和 getter 的名称是全局的，即它们在整个应用中是唯一的。但是，当应用变得复杂并且包含多个模块时，可能会出现命名冲突的情况。这时，可以通过给模块设置命名空间来区分不同模块的命名空间。

在模块中设置命名空间可以通过 namespaced 属性来实现。将 namespaced 属性设置为 true，即可启用命名空间。启用命名空间后，模块内部的 mutation、action 和 getter 将只在其所属的命名空间内生效。

const moduleA = {namespaced: true, // 启用命名空间state: { ... },mutations: { ... },actions: { ... },getters: { ... }
};export default moduleA;

在使用命名空间时，调用模块内部的 mutation、action 和 getter 需要使用命名空间前缀。可以使用 namespace 辅助函数来简化命名空间的使用。

export default {computed: {...mapState('moduleA', ['xxx']),...mapGetters('moduleB', ['xxx'])},methods: {...mapActions('moduleA', ['xxx']),...mapMutations('moduleB', ['xxx'])}
}

使用 mapState、mapGetters、mapActions 和 mapMutations 辅助函数来从 moduleA 模块和 moduleB 模块中映射状态、计算属性、操作和变更。通过在函数调用中指定模块的命名空间，可以正确地引用相应模块的内容。

使用命名空间可以在复杂的应用中避免命名冲突，提高代码的可维护性和可读性。它使得模块内部的 mutation、action 和 getter 更加封装和独立，避免了不同模块之间的相互干扰。

模块动态注册

在 Vuex 中，可以使用动态注册（Dynamic Registration）来动态添加和注册模块。这允许在应用运行时根据需要添加新的模块，而不必在初始化时将所有模块都注册到 Vuex store 中。

动态注册模块可以使用 registerModule 方法来实现。该方法接受两个参数：path 和 module。path 是一个字符串或字符串数组，用于指定模块在 state 树中的位置，module 是一个包含模块的对象。

// 将dynamicModule进行动态注册
export default {methods: {registerDynamicModule() {import('./dynamicModule').then(module => {const dynamicModule = module.default;// 1.1动态注册模块this.$store.registerModule('dynamic', dynamicModule);// 1.2嵌套动态注册（对象写法）this.$store.registerModule('store.dynamic', dynamicModule);// 1.3嵌套动态注册（数组写法）this.$store.registerModule(['store','dynamic'], dynamicModule);});},unregisterDynamicModule() {// 2.1取消动态注册的模块this.$store.unregisterModule('dynamic');// 2.2取消嵌套动态注册的模块（对象写法）this.$store.unregisterModule('store.dynamic');// 2.3取消嵌套动态注册的模块（数组写法）this.$store.unregisterModule(['store','dynamic']);}}
};

通过动态注册模块，可以根据应用的需要在运行时添加或移除模块，灵活地管理应用的状态。这对于需要按需加载模块或根据用户操作动态添加功能的场景非常有用。注意，在取消注册模块时，要确保模块的状态和操作已经不再需要，以避免潜在的错误或内存泄漏。

保留 state

在注册一个新 module 时，你很有可能想保留过去的 state，例如从一个服务端渲染的应用保留 state。

可以使用 Vuex 的 preserveState 选项。当注册模块时，你可以通过传递 { preserveState: true } 选项来保留模块的状态。这样，在取消注册模块后，状态仍然会保留在根状态树中。

export default {methods: {registerModule() {import('./module').then(module => {const module = module.default;// 动态注册模块并保留状态this.$store.registerModule('moduleName', module, { preserveState: true });});},unregisterModule() {// 取消动态注册的模块this.$store.unregisterModule('moduleName');}}
};

通过使用 preserveState 选项，取消注册模块后，模块的状态将保留在根状态树中，以便在需要时可以重新注册并恢复状态。这对于需要在模块之间动态切换或临时取消注册模块的情况非常有用。

模块重用

在 Vuex 中，可以通过模块重用的方式来减少重复的代码和逻辑。模块重用允许你在多个地方注册相同的模块，以便在不同的上下文中共享模块的状态和功能。

要实现模块重用，你可以在 Vuex 的模块定义中使用工厂函数，该函数返回模块对象，以便可以在不同的地方多次调用。

// 模块工厂函数
function createModule() {return {state: { ... },mutations: { ... },actions: { ... },getters: { ... }};
}const store = new Vuex.Store({state: { ... },mutations: { ... },actions: { ... },getters: { ... },modules: {moduleA: createModule(), // 注册模块AmoduleB: createModule() // 注册模块B}
});export default store;

这么说可能比较抽象，举一个例子说明，我们可以使用模块重用来共享用户信息的状态和相关操作。

首先，我们定义一个模块工厂函数，用于创建用户信息模块。在该模块中，我们可以定义状态、变异、动作和获取器等内容。

// userModule.js
export default function createUserModule() {return {namespaced: true,state: {user: null},mutations: {SET_USER(state, user) {state.user = user;}},actions: {setUser({ commit }, user) {commit('SET_USER', user);}},getters: {getUser(state) {return state.user;}}};
}

模块重用在以下场景中非常有用：

多个页面共享相同的状态和逻辑：如果你有多个页面需要访问和修改相同的状态，并且具有相似的逻辑和功能，可以使用模块重用来共享这些状态和功能。这样，你可以在每个页面中注册相同的模块，并在不同的上下文中使用相同的状态和操作。
不同的组件需要访问相同的状态：如果你有多个组件需要访问相同的状态，例如共享的用户信息或全局配置，可以使用模块重用来注册这些共享状态的模块。这样，不同的组件可以通过在模块中定义的获取器来访问相同的状态，避免了需要在每个组件中重复定义和同步状态的问题。

const store = new Vuex.Store({modules: {user: createUserModule() // 注册用户信息模块，这个用户信息模块就可以全局使用}
});export default store;

模块实例具有独立性：如果你需要在应用程序中创建多个独立的用户信息模块实例，每个实例具有自己的状态和操作，需要多次调用createUserModule 来创建不同的模块实例。这样每个模块实例将独立管理自己的状态，并且彼此之间不会相互影响。

const store = new Vuex.Store({modules: {user1: createUserModule(), // 创建第一个用户信息模块实例user2: createUserModule() // 创建第二个用户信息模块实例}
});export default store;

动态注册和取消注册模块：模块重用还可以在需要动态注册和取消注册模块的情况下发挥作用。如果你需要在运行时根据条件注册或取消注册模块，可以使用模块重用来定义模块工厂函数，并在需要时多次调用该函数来注册或取消注册模块。

const store = new Vuex.Store({modules: {}
});// 动态注册用户信息模块
function registerUserModule(moduleName) {store.registerModule(moduleName, createUserModule());
}// 动态取消注册用户信息模块
function unregisterUserModule(moduleName) {store.unregisterModule(moduleName);
}export default store;