按业务域拆分独立模块是避免 store 膨胀最直接有效的方式，vuex modules 是大型项目的必选项，需启用 namespaced 隔离、合理组织层级，vue 3 中推荐使用 pinia 替代。
把状态按业务域拆成独立模块，是避免 Store 膨胀最直接有效的方式。Vuex 的 Modules 功能就是为此设计的，不是可选项，而是大型项目里的必选项。
按功能划分独立模块
不要把所有 state、mutation、action 堆在同一个文件里。比如用户相关数据、订单逻辑、购物车信息，各自拆成 user.js、order.js、cart.js。每个模块只管自己的事，state 是局部的，不会互相污染。
- 模块文件里定义自己的
state（推荐函数式写法，避免对象引用共享） - 对应模块内的
mutations只操作本模块的state，第一个参数就是该模块的局部状态 -
actions中可通过context.state访问局部状态，context.rootState获取根状态
启用命名空间隔离行为
默认情况下，所有模块的 mutation 和 action 都注册在全局命名空间，容易重名冲突。加上 namespaced: true 后，调用时就必须带上模块前缀，比如 user/login、cart/addItem。
- 在模块导出对象中声明
namespaced: true - 组件中 dispatch 或 commit 时使用带前缀的字符串，或配合
createNamespacedHelpers简化写法 - getter 同样受命名空间影响，访问时需用
user/realName这类路径形式
合理组织模块层级
模块可以嵌套。比如权限管理较复杂，可在 user 模块下再分出 roles 子模块；或者把通用配置抽成 common 模块供其他模块复用。
- 子模块的 state 会自动挂载到父模块路径下，如
store.state.user.roles.list - 嵌套模块也支持
namespaced，建议统一开启，保持行为一致 - 避免过度嵌套，三层以内较易维护；超过三层建议重新评估职责边界
结合工具链做轻量替代
Vue 3 项目中，Pinia 已成为更主流的选择。它天然支持模块化（每个 defineStore 就是一个模块），API 更简洁，且默认隔离作用域，无需手动设 namespaced。
- 用
defineStore创建多个 store，如useUserStore()、useCartStore() - 支持懒加载：只在需要时 import 对应 store，降低首屏体积
- 内置持久化插件，关键状态（如登录态）刷新不丢失，减少冗余请求
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
