Vue.js状态管理模块设计核心是按业务域拆分、职责隔离、可复用、易协作，每个模块仅管理自身数据并开启namespaced，通过mapState/mapGetters或useStore收敛访问，模块间通信 via getter、action联动或事件机制。
Vue.js 组件化架构中，状态管理模块设计的核心是“按业务域拆分、职责隔离、可复用、易协作”。它不是把所有状态堆进一个 store，而是让每个模块只管自己那块数据——比如用户登录状态归 user 模块管，菜单配置归 app 模块管，权限规则归 permission 模块管。
模块划分要贴业务，别按技术分
一个常见误区是按组件类型（如 header、sidebar）或页面路由来切模块。真正有效的划分依据是业务领域：
- 用户模块（user）：负责 token、角色、基本信息、登录态持久化
- 应用配置模块（app）：管理主题色、布局方式、语言、多标签页开关等全局 UI 状态
- 权限模块（permission）：控制菜单动态生成、按钮显隐、路由守卫所需的角色/权限列表
- 业务模块（如 order、product）：各自维护订单列表、筛选条件、详情缓存等独立状态，不与其他模块交叉污染
每个模块必须开启 namespaced
不加 namespaced: true 的模块容易引发命名冲突——比如两个模块都定义了 SET_LOADING，提交时就会互相覆盖。开启命名空间后，调用需带前缀：
- 提交 mutation：
this.$store.commit('user/SET_TOKEN', token) - 触发 action：
this.$store.dispatch('order/fetchList') - 读取 getter：
this.$store.getters['app/theme']
同时建议在模块内统一使用常量定义 type，避免字符串硬编码出错。
立即学习“前端免费学习笔记（深入）”；
状态访问要收敛，别到处 this.$store
直接写 this.$store.state.xxx 或 this.$store.getters.xxx 会让组件与 store 耦合过紧，也难做单元测试。推荐两种方式：
- mapState / mapGetters 辅助函数：在组件中解构使用，语义清晰且支持命名别名
- 组合式 API + useStore（Vuex 4）：配合 provide/inject 机制，在 setup 中精准获取所需模块状态，避免全量导入
getter 应该只做派生计算，不包含副作用；复杂逻辑建议封装在 action 中处理。
模块间通信走事件或依赖注入，不直读对方 state
模块之间不该通过 this.$store.state.order.list 这种方式跨模块读取——这破坏了封装性，也导致难以追踪数据流向。正确做法包括：
- 需要共享数据时，由源头模块提供明确的 getter，并在 consuming 模块中按需引用
- 状态变更需联动时，用 action 触发后 commit 多个模块的 mutation（例如登录成功后，user 模块存 token，app 模块重置主题，permission 模块刷新菜单）
- 必要时可通过事件总线或 provide/inject 传递轻量信号（如“用户登出”事件），而非传递状态本身
模块边界清晰了，后续抽离、替换、测试才真正可行。
