Vuex 状态管理如何配合命名空间解决模块间的状态命名冲突

Vuex模块需显式设置namespaced: true才能隔离作用域，否则同名mutations/actions会覆盖；启用后必须用模块前缀调用，如'user/setName'；跨模块通信应通过rootState、rootGetters或{ root: true }选项，避免硬编码路径。

Vuex 通过 namespaced: true 开启模块命名空间，让每个模块的 state、getters、mutations 和 actions 都被限定在自己的作用域内，从根本上避免同名项互相覆盖或误触发。

模块必须显式启用 namespaced

默认情况下，所有模块都注册在全局命名空间，哪怕拆成多个文件，只要 mutation 名叫 setUser，就只有一个生效——后注册的会覆盖前一个。只有把模块配置中的 namespaced: true 明确写上，该模块才真正“自立门户”。漏写或写成 false，等于没隔离。

1. 正确写法：export default { namespaced: true, state: ..., mutations: { ... } }
2. 错误写法：export default { state: ..., mutations: { ... } }（无 namespaced 字段，默认为 false）
3. 模块名本身由你在 store 的 modules 对象中定义的 key 决定，比如 user: userModule，那它的命名空间就是 user/

调用时必须带命名空间前缀

启用后，所有访问都要加前缀，否则找不到。这不是额外负担，而是强制你明确来源，提升可读性和可维护性。

1. 组件中 commit：用 commit('user/setName', 'Alice')，不能只写 commit('setName')
2. dispatch action：用 dispatch('user/login', credentials)
3. mapState/mapGetters 辅助函数支持命名空间映射：mapState('user', ['name', 'email']) 或 mapGetters('user', ['fullName'])
4. 模板中直接访问：需用 $store.state.user.name，不能省略 user.

跨模块通信要解耦，别硬写路径

不同模块之间需要共享数据或触发逻辑时，不能靠拼接字符串硬调用，否则耦合严重、难以测试和重构。

1. 读其他模块 state：在 getter 或 action 的参数中使用 rootState，例如 rootState.cart.items
2. 读其他模块 getter：用 rootGetters['cart/itemCount']，而不是把 cart 的 getter 复制到 user 模块里
3. 触发其他模块 mutation/action：加 { root: true } 选项，如 commit('clearCart', null, { root: true })，表示去根空间找
4. 更推荐方式：通过公共 getter 暴露状态，或用事件总线 / 组合式 API 的 provide/inject 做轻量通信，避免 store 层过度纠缠

动态注册模块也得保持 namespaced 一致

运行时用 store.registerModule('admin', adminModule) 加载模块时，如果 adminModule 没设 namespaced: true，它依然会污染全局命名空间。动态模块和静态模块一样，隔离规则完全一致。

1. 注册前确认模块对象含 namespaced: true
2. 卸载时用 store.unregisterModule('admin')，避免残留
3. 命名空间前缀始终是注册时的 key，比如 registerModule('orderDetail', module)，其空间就是 orderDetail/