DM-ROW 接口文档

Appearance

模块化管理 ​

**本文引用的文件** - [store/index.js](file://app/devicemate-app/store/index.js) - [store/modules/index.js](file://app/devicemate-app/store/modules/index.js) - [store/modules/login.js](file://app/devicemate-app/store/modules/login.js) - [store/modules/common.js](file://app/devicemate-app/store/modules/common.js) - [store/modules/equipment.js](file://app/devicemate-app/store/modules/equipment.js) - [store/modules/maintain.js](file://app/devicemate-app/store/modules/maintain.js) - [store/modules/repair.js](file://app/devicemate-app/store/modules/repair.js) - [main.js](file://app/devicemate-app/main.js) - [pages/user/login.vue](file://app/devicemate-app/pages/user/login.vue) - [modules/common/assign.vue](file://app/devicemate-app/modules/common/assign.vue) - [modules/maintain/apply.vue](file://app/devicemate-app/modules/maintain/apply.vue) - [modules/repair/apply.vue](file://app/devicemate-app/modules/repair/apply.vue)

目录 ​

  1. 引言
  2. 项目结构
  3. 核心组件
  4. 架构总览
  5. 详细组件分析
  6. 依赖分析
  7. 性能考虑
  8. 故障排查指南
  9. 结论
  10. 附录

引言 ​

本文件系统性梳理 DeviceMate 前端应用的模块化状态管理方案，聚焦于 store 的模块划分与职责边界、命名空间隔离、模块间依赖与数据交互模式，并给出模块开发规范、代码组织与命名约定，以及实际模块示例与集成案例，帮助开发者快速理解并高效扩展状态管理。

项目结构 ​

DeviceMate 前端采用基于 Vuex 的模块化状态管理，核心入口位于应用入口文件中注入 store；store 的模块通过统一索引文件集中导出，形成清晰的模块边界与可维护性。

图表来源

章节来源

核心组件 ​

本节对各 store 模块进行职责与边界说明，并指出其命名空间与数据交互方式。

  • 登录模块（login）

    • 职责：维护登录相关状态，如登录跳转地址等。
    • 关键点：提供提交动作以写入登录 URL；当前仅包含少量状态与单个动作。
    • 命名空间：未声明命名空间，使用全局路径访问。
    • 数据交互：页面通过 dispatch 触发动作，组件通过 mapState 计算属性读取。

  • 通用模块（common）

    • 职责：承载跨业务通用状态，如页面类型、分配链接、历史记录、维修对象等。
    • 关键点：提供多个动作用于设置不同通用字段；当前仅包含少量状态与多动作。
    • 命名空间：未声明命名空间，使用全局路径访问。
    • 数据交互：多处业务页面通过 dispatch 设置通用上下文，组件通过 mapState 读取。

  • 设备模块（equipment）

    • 职责：设备维度的轻量状态，如设备编码、设备编号、图片地址等。
    • 关键点：提供多条 mutation 用于设置与清空字段；当前仅包含少量状态与多 mutation。
    • 命名空间：未声明命名空间，使用全局路径访问。
    • 数据交互：设备相关页面与功能模块通过 mutation 更新状态。

  • 维修模块（repair）

    • 职责：维修工作流相关的表单与物料列表等状态。
    • 关键点：声明命名空间；提供设置物料列表的动作；状态包含复杂表单数据结构。
    • 命名空间：已启用命名空间，需使用模块前缀访问。
    • 数据交互：维修页面通过 dispatch 使用命名空间路径设置物料列表，组件通过 mapState 读取。

  • 保养模块（maintain）

    • 职责：保养工作流相关的表单与物料列表等状态。
    • 关键点：声明命名空间；提供设置物料列表的动作；状态包含复杂表单数据结构。
    • 命名空间：已启用命名空间，需使用模块前缀访问。
    • 数据交互：保养页面通过 dispatch 使用命名空间路径设置物料列表，组件通过 mapState 读取。

章节来源

架构总览 ​

下图展示从页面到 store 的典型调用链路，体现模块间的数据流向与命名空间差异。

图表来源

详细组件分析 ​

登录模块（login） ​

  • 功能要点
    • 状态：登录 URL 字段。
    • 动作：setLoginUrl，通过提交 LOGIN_COMMIT 将数据写入对应字段。
    • 命名空间：未声明，使用全局路径访问。
  • 页面集成
    • 登录页在触发 ADFS 登录时设置 loginUrl，供页面渲染 web-view 展示外部登录页。

图表来源

章节来源

通用模块（common） ​

  • 功能要点
    • 状态：pageType、assignUrl、history、repair 等通用上下文。
    • 动作：setPageType、setAssignUrl、setHistory、setRepair。
    • 命名空间：未声明，使用全局路径访问。
  • 页面集成
    • 多个业务页面通过 dispatch 设置 assignUrl、history、repair 等，供后续流程使用。
    • 通用页面（如指派）通过 mapState 读取 assignUrl 并发起业务请求。

图表来源

章节来源

设备模块（equipment） ​

  • 功能要点
    • 状态：deviceCode、deviceNo、imgUrl。
    • 动作：无；通过多条 mutation 设置/清空字段。
    • 命名空间：未声明，使用全局路径访问。
  • 页面集成
    • 设备相关页面通过 mutation 更新设备编码、编号与图片地址，供其他模块或页面复用。

图表来源

章节来源

维修模块（repair） ​

  • 功能要点
    • 状态：formData（复杂表单数据）、partList。
    • 动作：setPartList（命名空间路径）。
    • 命名空间：已启用，需使用 repair/setPartList 访问。
  • 页面集成
    • 维修申请页在组件销毁时清理 partList，避免跨页面污染。
    • 列表页通过 mapState 读取 partList，结合后端标准数据生成待领料清单。

图表来源

章节来源

保养模块（maintain） ​

  • 功能要点
    • 状态：pageType、partList。
    • 动作：setPartList（命名空间路径）。
    • 命名空间：已启用，需使用 maintain/setPartList 访问。
  • 页面集成
    • 保养申请页在组件销毁时清理 partList，避免跨页面污染。
    • 列表页通过 mapState 读取 partList，结合后端标准数据生成待领料清单。

图表来源

章节来源

依赖分析 ​

  • 模块聚合
    • store/modules/index.js 聚合所有模块，形成统一入口，便于主程序注入。
  • 命名空间策略
    • login/common/equipment 未启用命名空间，适合轻量模块与全局共享。
    • maintain/repair 启用命名空间，避免同名 action/mutation 冲突，提升模块内聚性。
  • 页面依赖
    • 页面通过 $store.dispatch 与 $store.commit 调用模块动作与变更状态。
    • 页面通过 mapState 读取模块状态，减少样板代码。

图表来源

章节来源

性能考虑 ​

  • 命名空间与模块粒度
    • 对于高频冲突或复杂状态的模块（如维修/保养），启用命名空间可降低耦合与误用风险。
  • 状态最小化
    • login/common/equipment 当前状态较少，适合全局共享；建议保持简洁，避免过度分散。
  • 生命周期清理
    • 在组件销毁阶段清理命名空间模块的临时状态（如维修/保养的 partList），防止内存泄漏与跨页面污染。
  • 计算属性与映射
    • 使用 mapState 等辅助函数读取状态，避免直接深层访问导致不必要的重渲染。

故障排查指南 ​

  • 命名空间路径错误
    • 症状：dispatch 报错找不到 action。
    • 排查：确认模块是否启用命名空间，调用时使用完整路径（如 repair/setPartList）。
  • 状态未更新或值异常
    • 症状：页面未反映最新状态。
    • 排查：检查是否使用了正确的 mutation 或 action；确认是否在正确模块内提交。
  • 跨页面状态污染
    • 症状：离开页面后仍保留上一页面数据。
    • 排查：在组件销毁钩子中清理命名空间模块的临时状态。
  • 全局模块冲突
    • 症状：多个模块存在同名 action/mutation 导致不可预期行为。
    • 排查：将相关模块迁移至命名空间，或重构为更细粒度的模块。

章节来源

结论 ​

DeviceMate 的模块化状态管理以 Vuex 为基础，通过模块聚合与命名空间策略实现了清晰的职责边界与可维护性。全局轻量模块（login/common/equipment）与命名空间模块（maintain/repair）相辅相成，既满足通用场景的快速接入，又保障复杂业务的稳定演进。建议在新增模块时遵循命名约定与开发规范，优先启用命名空间以降低冲突风险，并在生命周期中及时清理临时状态。

附录 ​

开发规范与命名约定 ​

  • 模块命名
    • 使用名词短语，语义明确，如 login、common、equipment、maintain、repair。
  • 文件命名
    • 模块文件采用小驼峰或全小写，如 login.js、common.js、equipment.js。
  • 状态字段
    • 使用语义化字段名，避免缩写；复杂对象建议拆分为子字段或子模块。
  • 动作与变更
    • 动作名使用动词短语，如 setPageType、setAssignUrl、setPartList。
    • 变更名使用全大写常量风格，如 LOGIN_COMMIT、COMMON_COMMIT、REPAIR_COMMIT。
  • 命名空间
    • 复杂或易冲突模块启用命名空间；简单模块可不启用以简化调用。
  • 页面调用
    • 统一通过 $store.dispatch 与 $store.commit 调用；使用 mapState/mapGetters 等辅助函数读取状态。
  • 生命周期
    • 在 beforeDestroy 或页面隐藏时清理命名空间模块的临时状态，避免跨页面污染。

实际模块示例与集成案例 ​