面试题：什么是 Vuex 的模块化 module？有哪些应用场景？

什么是 Vuex 的模块化（Module）？

Vuex 的模块化（Module）是指将 Vuex 的 Store 拆分为多个模块（Module），每个模块拥有自己的 state、mutations、actions、getters，甚至可以嵌套子模块。模块化使得大型应用的状态管理更加清晰和可维护。

1. 模块化的基本结构

一个 Vuex 模块是一个包含 state、mutations、actions、getters 的对象。

示例

const moduleA = {
  state: () => ({
    count: 0
  }),
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
};

const moduleB = {
  state: () => ({
    message: 'Hello'
  }),
  mutations: {
    updateMessage(state, newMessage) {
      state.message = newMessage;
    }
  }
};

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
});

说明

state：模块的局部状态。
mutations：修改模块状态的同步方法。
actions：提交 mutations 的异步方法。
getters：从模块状态派生的计算属性。

2. 模块的命名空间

默认情况下，模块的 actions、mutations 和 getters 是注册在全局命名空间中的。为了避免命名冲突，可以为模块启用命名空间。

示例

const moduleA = {
  namespaced: true, // 启用命名空间
  state: () => ({
    count: 0
  }),
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
};

const store = new Vuex.Store({
  modules: {
    a: moduleA
  }
});

// 使用命名空间访问
store.commit('a/increment'); // 提交模块 A 的 mutation
store.dispatch('a/increment'); // 分发模块 A 的 action

说明

namespaced: true：启用命名空间后，模块的 actions、mutations 和 getters 会带上模块的路径。
访问方式：通过 模块名/方法名 访问模块的方法。

3. 模块的嵌套

模块可以嵌套子模块，形成树状结构。

示例

const moduleA = {
  namespaced: true,
  modules: {
    subModule: {
      namespaced: true,
      state: () => ({
        subCount: 0
      }),
      mutations: {
        increment(state) {
          state.subCount++;
        }
      }
    }
  }
};

const store = new Vuex.Store({
  modules: {
    a: moduleA
  }
});

// 访问嵌套模块
store.commit('a/subModule/increment');

4. 模块的应用场景

（1）大型应用的状态管理

在大型应用中，状态管理可能非常复杂。通过模块化，可以将状态按功能或业务逻辑拆分，使代码更清晰、更易维护。

（2）团队协作开发

在团队开发中，不同开发者可以负责不同的模块，避免代码冲突和命名冲突。

（3）按需加载

结合动态导入（import()），可以实现 Vuex 模块的按需加载，优化应用的初始加载性能。

示例

const store = new Vuex.Store({
  modules: {
    user: () => import('./modules/user'), // 动态加载用户模块
    product: () => import('./modules/product') // 动态加载产品模块
  }
});

（4）复用模块

可以将通用的模块提取出来，复用在多个项目中。

示例

// commonModule.js
export default {
  state: () => ({
    commonData: 'Shared data'
  }),
  mutations: {
    updateCommonData(state, newData) {
      state.commonData = newData;
    }
  }
};

// 在项目中使用
import commonModule from './commonModule';

const store = new Vuex.Store({
  modules: {
    common: commonModule
  }
});

5. 模块的动态注册和卸载

Vuex 支持动态注册和卸载模块，适合插件化或按需加载的场景。

动态注册模块

store.registerModule('dynamicModule', {
  state: () => ({
    dynamicData: 'Dynamic data'
  })
});

动态卸载模块

store.unregisterModule('dynamicModule');

6. 模块的局部状态和全局状态

局部状态：模块内部的 state 是局部的，只能通过模块的路径访问。
全局状态：根模块的 state 是全局的，可以通过 store.state 直接访问。

示例

const store = new Vuex.Store({
  state: {
    globalData: 'Global data'
  },
  modules: {
    a: {
      state: () => ({
        localData: 'Local data'
      })
    }
  }
});

console.log(store.state.globalData); // 访问全局状态
console.log(store.state.a.localData); // 访问模块 A 的局部状态