DM-ROW 接口文档

Appearance

数据存储与国际化 ​

**本文引用的文件** - [localstorage.js](file://app/devicemate-app/utils/localstorage.js) - [index.js（国际化入口）](file://app/devicemate-app/locale/index.js) - [en.json（英文资源）](file://app/devicemate-app/locale/en.json) - [zh-Hans.json（简体中文资源）](file://app/devicemate-app/locale/zh-Hans.json) - [main.js（应用入口）](file://app/devicemate-app/main.js) - [App.vue（应用生命周期）](file://app/devicemate-app/App.vue) - [login.vue（登录页-语言切换）](file://app/devicemate-app/pages/user/login.vue) - [common.js（通用工具-升级检测）](file://app/devicemate-app/utils/common.js) - [userMixins.js（用户混入-权限与工厂加载）](file://app/devicemate-app/utils/userMixins.js) - [index.js（Vuex入口）](file://app/devicemate-app/store/index.js) - [index.js（Vuex模块聚合）](file://app/devicemate-app/store/modules/index.js) - [common.js（Vuex模块-公共状态）](file://app/devicemate-app/store/modules/common.js) - [index.js（uView UI入口）](file://app/devicemate-app/uview-ui/index.js)

目录 ​

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

简介 ​

本指南聚焦于DeviceMate移动端（基于uni-app）的数据存储与国际化两大主题，系统阐述本地数据持久化方案、缓存策略、序列化与清理机制；同时详解国际化配置、动态语言切换、文本翻译机制与最佳实践。文档结合代码级分析与可视化图示，帮助开发者快速理解并高效落地。

项目结构 ​

围绕数据存储与国际化的关键目录与文件如下：

  • 数据存储：utils/localstorage.js 提供统一的本地存储封装；App.vue、login.vue、userMixins.js 等多处使用该封装进行用户信息、系统信息、默认工厂等数据的读写与清理。
  • 国际化：locale/index.js 初始化VueI18n，根据系统语言或缓存语言设置当前locale；en.json、zh-Hans.json提供多语言资源；login.vue支持运行时语言切换；common.js在升级检测中使用 $t 进行文案展示。

图表来源

章节来源

核心组件 ​

  • 本地存储封装：提供统一的 save、get、remove、clear 方法，基于 uni 存储接口，自动进行 JSON 序列化/反序列化。
  • 国际化初始化：根据系统语言或缓存语言初始化 i18n，挂载到 Vue 原型，支持运行时切换。
  • 应用入口集成：在 main.js 中注册 $db、$http、$showToast、i18n、Vuex，确保全局可用。
  • 登录页语言切换：提供语言选择器，保存 systemInfo 并调用 uni.setLocale 触发界面刷新。
  • 升级检测与文案：在升级检测中使用 $t 展示“已是最新”等文案，体现 i18n 的运行时生效。

章节来源

架构总览 ​

整体架构围绕“应用入口 -> 数据存储/国际化 -> 页面组件”的链路展开。应用启动时初始化 i18n 与 Vuex，随后各页面通过 $db 与 $t 访问本地存储与多语言资源。

图表来源

详细组件分析 ​

组件A：本地数据存储封装（utils/localstorage.js） ​

  • 设计要点
    • 统一键值对存取，内部以 JSON 字符串形式持久化，避免直接存对象导致的类型丢失。
    • 默认值返回策略：读取失败时返回传入的默认对象，降低空值判断成本。
    • 清理能力：支持按 key 删除与全量清空，便于登出与调试场景。
  • 使用场景
    • 用户信息：登录成功后保存 userInfo。
    • 系统信息：保存 language 以便后续初始化 i18n。
    • 默认工厂：保存 defaultFactory 供页面使用。
    • 登出清理：清空所有缓存。
  • 复杂度与性能
    • 单次读写为 O(1)，序列化/反序列化开销低，适合频繁的小对象缓存。
  • 错误处理
    • 无显式 try/catch，建议在调用方捕获异常或在外层包装容错函数。

图表来源

章节来源

组件B：国际化初始化与动态切换（locale/index.js、pages/user/login.vue） ​

  • 初始化流程
    • 从缓存读取 systemInfo，解析语言字段作为当前 locale。
    • 注册 VueI18n 实例并挂载到 Vue 原型，供全局使用。
  • 动态切换
    • 登录页提供语言选择器，变更后保存 systemInfo 并调用 uni.setLocale。
    • 通过 uni.reLaunch 刷新页面，使 $t 生效。
  • 文案使用
    • 在升级检测中通过 $t 展示“已是最新版本”等文案，体现 i18n 的即时生效。
  • 资源组织
    • 英文与简体中文资源分别位于 en.json 与 zh-Hans.json，采用层级键命名，便于模块化维护。

图表来源

章节来源

组件C：应用入口与全局注入（main.js、App.vue） ​

  • main.js 负责：
    • 引入并注册 uView UI、全局组件、自定义指令与HTTP请求。
    • 将 $db、$http、$showToast、i18n、Vuex 挂载到 Vue 原型，供全站使用。
  • App.vue 生命周期：
    • 启动时清理临时标记、检查升级、鉴权跳转。
    • onShow 阶段处理外部参数（如直达页面），拉取用户信息与菜单，保存至本地存储，再进行权限跳转。

图表来源

章节来源

组件D：Vuex与本地存储协同（store/index.js、store/modules/index.js、store/modules/common.js） ​

  • Vuex 入口：聚合 modules，提供全局状态容器。
  • 模块示例：common 模块定义了若干页面共享的状态与动作（如 pageType、assignUrl、history、repair），通过 commit 更新 state。
  • 与本地存储的关系：页面通过 $db 读写用户信息、系统信息等；Vuex 用于跨组件共享业务状态，二者互补。

图表来源

章节来源

依赖关系分析 ​

  • 组件耦合
    • main.js 作为全局装配中心，耦合 i18n、Vuex、$db、$http 等核心能力。
    • App.vue 与多个模块协作：鉴权跳转、工厂加载、升级检测、消息红点等。
    • login.vue 与 i18n、$db 紧密关联，负责语言切换与用户信息落盘。
  • 外部依赖
    • uni 存储与国际化 API：基于 uni.setStorageSync、uni.getStorageSync、uni.setLocale。
    • uView UI：提供丰富的组件与样式，提升开发效率。

图表来源

章节来源

性能考虑 ​

  • 存储策略
    • 小对象频繁读写：使用 $db.get/$db.save，避免重复序列化/反序列化，必要时在组件内做缓存。
    • 大对象或列表：建议分页或懒加载，减少一次性读取。
    • 定期清理：登出时调用 $db.clear，避免残留敏感数据。
  • 国际化渲染
    • $t 为轻量渲染，建议在模板中直接使用，避免在循环中重复计算。
    • 语言切换后通过 uni.reLaunch 刷新页面，确保文案一致性。
  • UI框架
    • uView 提供大量组件，注意按需引入与样式覆盖，避免不必要的体积增长。

[本节为通用指导，无需特定文件引用]

故障排查指南 ​

章节来源

结论 ​

DeviceMate移动端在数据存储方面采用统一的 $db 封装，结合本地缓存与接口数据实现灵活持久化；在国际化方面通过 i18n 初始化与运行时切换，配合多语言资源文件，实现了良好的多语言体验。建议在实际开发中遵循本文档的最佳实践，确保数据安全、性能与可维护性。

[本节为总结性内容，无需特定文件引用]

附录 ​

A. 数据存储最佳实践清单 ​

  • 使用 $db.save 保存用户信息、系统信息、默认工厂等关键数据。
  • 对象存取前统一 JSON 序列化，读取后反序列化。
  • 登出时调用 $db.clear，清理敏感数据。
  • 大数据量场景采用分页或懒加载，避免阻塞。

章节来源

B. 国际化开发标准流程 ​

  • 资源组织：按模块划分键名，英文与中文资源一一对应。
  • 初始化：在 locale/index.js 中注册 i18n，读取缓存语言。
  • 运行时切换：登录页提供语言选择器，保存 systemInfo 并调用 uni.setLocale。
  • 文案使用：在模板中通过 $t 渲染，升级检测等场景使用 $t 展示文案。

章节来源