Vuex模块化关键在于开启namespaced: true并统一访问规范，否则模块内API会与全局或其他模块冲突；需用createNamespacedHelpers或带命名空间的map辅助函数，禁止跨模块直接修改state。
Vuex 模块化不是“加个 modules 就完事”，关键在于命名空间（namespaced: true）的开启和统一访问规范，否则模块内 action、mutation、getter 仍会和根空间或其他模块冲突。
模块必须开启 namespaced
每个模块默认处于全局命名空间，即使放在 modules 对象里，不显式声明 namespaced: true，它的 type 字符串（如 'SET_USER'）依然可能覆盖或被其他模块覆盖。
- 在模块对象中第一层写
namespaced: true（布尔值，不能是字符串） - 开启后，该模块所有 mutation、action、getter 的调用都必须带模块路径前缀，例如
user/SET_USER - 不开启 namespaced，Vuex 会把模块内的 type 直接注册到全局，极易引发同名覆盖
统一使用带命名空间的辅助函数
避免手写冗长的 type 字符串，推荐用 createNamespacedHelpers 或按需解构：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
-
方式一（推荐）：在组件中导入并绑定模块名：
const { mapState, mapActions } = createNamespacedHelpers('user')
后续mapActions(['login', 'logout'])自动映射为user/login、user/logout -
方式二（灵活）：使用完整路径的 mapXXX 辅助函数：
mapState('user', ['profile', 'token'])mapActions('user', ['login', 'fetchProfile'])
模块内不要依赖全局 state 或 mutation
模块应尽量自包含。若必须跨模块通信，用以下安全方式：
立即学习“前端免费学习笔记（深入）”；
- 需要读取其他模块状态？通过
rootState（在 getter 第三个参数）或rootGetters（第四个参数）访问，例如：someGetter: (state, getters, rootState, rootGetters) => rootState.app.theme - 需要触发其他模块 action？在 action 中通过
{ root: true }选项调用：dispatch('app/setLoading', true, { root: true }) - 避免在模块 mutation 里直接修改非本模块 state —— mutation 必须是同步且作用域明确的
文件结构与命名建议（实战友好）
模块文件按功能拆分，命名即命名空间名，保持小写+中划线风格（如 user.js、order-management.js），避免驼峰造成路径拼接歧义：
- 每个模块文件导出一个对象，含
namespaced: true、state、mutations、actions、getters - 根 store/index.js 中统一 import 并组合：
import user from './modules/user'import product from './modules/product'export default new Vuex.Store({ modules: { user, product } }) - 模块内 state 推荐用函数返回（避免对象引用共享）：
state: () => ({ list: [], loading: false })
