什么是Vuex的模块化？

随着Vue应用规模增长，store中管理的状态会变得庞大而复杂。Vuex的模块化允许你将单一的store拆分成多个独立的模块。每个模块拥有自己的state、mutations、actions、getters，甚至可以嵌套子模块，这使得大型应用的状态管理结构更清晰、更易于维护。

模块的基本结构

一个模块本质上就是一个包含Vuex选项的对象。

// 模块A
const moduleA = {
  state: () => ({ count: 0 }),
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: { ... },
  getters: { ... }
};

// 模块B
const moduleB = {
  state: () => ({ list: [] }),
  mutations: { ... },
  actions: { ... }
};

// 根store中引入模块
const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
});

模块内部的state通过函数形式定义，确保在复用模块时状态是独立的。注册后，模块的状态会被挂载到根state的对应属性下，可以通过store.state.a和store.state.b访问。

模块内的局部状态与根状态

在模块内部的mutations和getters中，接收的第一个参数state是模块的局部状态对象。

const moduleA = {
  state: () => ({ count: 0 }),
  mutations: {
    increment(state) { // 这里的 state 是 moduleA 的局部 state
      state.count++;
    }
  },
  getters: {
    doubleCount(state) { // 局部 state
      return state.count * 2;
    }
  }
};

在模块的actions中，你可以通过解构获取state（局部状态）、rootState（根状态）和rootGetters。

actions: {
  someAction({ state, commit, rootState, rootGetters }) {
    // state 是模块局部状态
    // rootState 是根状态
  }
}

命名空间（namespaced）的重要性

默认情况下，模块内部的actions、mutations和getters是注册在全局命名空间下的。这意味着不同模块的同名mutation会同时被触发，这通常不是你想要的结果。

通过添加namespaced: true，可以使模块具有独立的命名空间。此时，其内部的getters、actions和mutations都会根据模块的路径自动调整名称。

const moduleA = {
  namespaced: true, // 关键！
  state: () => ({ ... }),
  getters: {
    isAdmin() { ... } // -> 通过 getters['a/isAdmin'] 访问
  },
  actions: {
    login() { ... } // -> 通过 dispatch('a/login') 触发
  },
  mutations: {
    setData() { ... } // -> 通过 commit('a/setData') 提交
  }
};

使用命名空间后，访问方式变为路径形式，彻底避免了命名冲突，使模块成为真正的独立单元。

因此，模块化是管理复杂Vuex store的必备工具。它将状态树按功能域进行分割，配合命名空间，让代码组织井井有条。对于大型项目，应从一开始就规划好模块结构。