vuex modules 是为解决大型应用中 store 膨胀、逻辑耦合与命名冲突而设计的核心机制，通过按业务域划分独立状态单元，支持命名空间隔离、跨模块通信及动态注册。
Vuex 的 Modules 是为解决大型应用中 store 膨胀、逻辑耦合、命名冲突等问题而设计的核心机制。它不是简单地把代码分文件，而是按业务域划分独立的状态单元，每个模块拥有自己的 state、mutations、actions 和 getters，并可通过命名空间实现真正隔离。
模块拆分的基本结构
把原本集中在根 store 的所有状态和逻辑，按功能域（如用户、订单、权限、仪表盘）拆成独立 JS 对象。每个模块导出一个配置对象，包含 state、mutations、actions、getters 四个部分：
- state 必须是函数（返回新对象），避免多个实例共享引用
- mutations 只接收本模块的局部 state，不能直接访问其他模块状态
- actions 中可通过 context.state 访问本模块状态，context.rootState 访问根状态
- getters 第一个参数是本模块 state，第二个是本模块 getters，第三个才是 rootState
启用命名空间避免全局污染
默认情况下，模块的 mutations 和 actions 注册在全局命名空间，容易重名覆盖。只要在模块中设置 namespaced: true，所有内部方法就会自动带上前缀：
- 调用 action：this.$store.dispatch('user/login')
- 提交 mutation：this.$store.commit('cart/addItem')
- 访问 getter：this.$store.getters['order/totalPrice']
- mapHelper 辅助函数需传入命名空间字符串，例如 mapActions('user', ['login'])
跨模块通信与状态复用
模块间不是完全封闭的，Vuex 提供了安全可控的协作方式：
- 在 action 中通过 context.rootState 或 context.rootGetters 访问全局状态
- getter 可组合多个模块的计算结果，比如权限模块的 isAuth + 用户模块的 role，生成 canEdit
- 需要从 A 模块触发 B 模块的 action 时，使用 dispatch({ root: true }) 强制走根命名空间
- 动态注册模块适用于路由级懒加载，比如进入「报表页」再 registerModule('report', reportModule)
项目目录与工程实践建议
合理的物理结构能强化模块化效果：
- store/index.js：只负责 createStore 和 modules 注册，不写业务逻辑
- store/modules/user.js、store/modules/order.js：每个文件一个模块，导出完整配置
- 模块内可进一步拆解：将 API 请求抽到 api/ 目录，state 初始值单独定义，便于测试和复用
- 嵌套子模块适用于复杂领域，例如 user/profile、user/setting，注册时路径为 user/profile
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
