vuex模块化状态管理必须按业务划分、启用命名空间、自动注册并统一访问。模块命名应体现业务领域（如user、permission），禁止技术性命名；每个模块需设namespaced: true，state仅存强依赖数据，mutations同步变更，actions处理异步，入口通过require.context自动加载，getter集中管理跨模块派生状态。
Vue.js 中使用 Vuex 进行模块化状态管理，核心在于按业务切分、命名空间隔离、自动注册、统一访问。vue-element-admin 的实践已被广泛验证，不是“可选方案”，而是中大型项目必须采用的结构规范。
模块划分要贴业务，别按技术分
模块命名应直接反映业务领域，比如 user（登录态与个人信息）、permission（路由权限与按钮级控制）、tagsView（多标签页状态）、settings（主题/布局等用户偏好）。避免出现 api、utils、common 这类技术性命名——它们不属于状态管理范畴，容易导致职责错位。
- 每个模块对应一个文件，放在
src/store/modules/下，如user.js、permission.js - 模块内部必须启用
namespaced: true，否则 action/mutation/getter 会全局冲突 - state 应只存当前模块强依赖的数据，不放跨模块共享的“中间态”（例如不存 token 字符串，而存解析后的用户角色和权限列表）
模块内部结构保持最小必要契约
一个标准模块只需导出对象，包含 namespaced、state、mutations、actions 四部分；getters 按需添加，不强制。所有逻辑围绕“该模块负责什么状态、谁可以改、怎么改”展开。
-
state是响应式源头，用普通对象定义，不嵌套过深（建议不超过 2 层） -
mutations必须是同步函数，只做纯数据变更，不调 API、不发事件、不写 localStorage -
actions处理异步，比如调用 API 后 commit mutation；一个 action 最好只 commit 一个 mutation，便于追踪 - mutation 类型名用大驼峰（如
SET_USER_INFO），action 名用小驼峰（如fetchUserInfo），保持语义清晰
入口自动加载，拒绝手动 import
vue-element-admin 的 src/store/index.js 使用 require.context 动态读取 modules 目录下所有 JS 文件，实现零配置注册。这是工程化关键一步，省去每次新增模块都要修改入口文件的麻烦。
- 代码本质是遍历
./modules/*.js，提取文件名作为模块名（如user.js→user） - 模块名即命名空间前缀，调用时写
user/setUserInfo而非setUserInfo - 如果某个模块临时禁用，直接重命名文件（如加
.disable后缀），无需删代码或注释导入语句
全局 getters 统一出口，不散落在模块里
虽然模块内可定义局部 getters，但涉及跨模块计算或高频复用的派生状态（如 isLogin、hasPermission），应集中写在 src/store/getters.js 中，并通过 mapGetters 或 store.getters 访问。
- getter 函数接收整个 store 的
state和getters，可组合多个模块状态（如结合user.info和permission.routes判断是否显示某菜单） - 避免在组件中多次调用
store.state.xxx手动计算，把逻辑沉淀到 getter 里更易测试和复用 - getter 是纯函数，不执行副作用，也不触发响应式更新（除非依赖的 state 变了）
模块化不是为炫技，而是让状态变更路径清晰、协作边界明确、调试线索可溯。只要模块划分合理、命名空间开启、入口自动加载、getter 集中管理，Vuex 就不会成为负担，反而成为系统稳定性的锚点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
