第9章 项目实战第三步使用 Dexie.js IndexedDB持久化数据

如果你正在做一个 Electron 桌面端项目，或者用 Vue 做前端应用，数据只存在内存里、一刷新就没了，这一章就是冲这个问题来的。它讲的是用 Dexie.js 封装 IndexedDB，把本地数据真正落到浏览器或桌面客户端里，属于整个项目实战链条里的第三步——前面已经搭好框架、跑通了大模型调用，到这里开始处理"数据存哪、怎么存、怎么查"。

它解决什么场景，适合什么基础

IndexedDB 是浏览器原生的本地数据库，容量比 localStorage 大得多，能存结构化对象、支持索引和事务，但原生 API 写起来很啰嗦：打开连接、建表、写事务、处理回调，一个简单查询要写十几行。Dexie.js 就是在它上面包了一层，用接近链式调用的写法把增删改查压到几行，还能声明式地定义表结构和版本升级。这一章要解决的就是"知道 IndexedDB 有用但不想被原生 API 劝退"的问题。

适合的基础：能看懂 Vue 的组件与生命周期，写过基本的异步代码（Promise、async/await），对前端项目目录结构不陌生。如果完全没接触过数据库概念，比如表、主键、索引，看的时候会稍微吃力，但不需要提前学 SQL，Dexie 的查询写法更接近 JavaScript 数组操作。反过来，如果你已经熟练用过 Dexie 或 idb 这类库，这一章对你偏简单，可以只挑版本升级和事务部分看。

建议先看哪几块，学完能做什么

按顺序，先看 Dexie 的初始化与表结构声明，也就是数据库实例怎么建、主键和索引怎么定义，这是后面所有操作的地基。然后看增删改查的基本写法，重点体会它和直接操作数组的区别：查询是异步的，条件可以用 where 加过滤组合出来。接着看版本升级机制，这是 IndexedDB 实际项目里最容易出问题的地方——表结构改了、老用户的数据怎么平滑迁移，Dexie 用版本号加 upgrade 回调来处理，值得单独花时间。最后再回到项目实战部分，看它怎么把这套东西接进已有的 Vue 组件和数据流里。

学完之后，你应该能独立完成这些事：给自己的应用设计一套本地表结构，把用户产生的数据持久化下来；写出按条件查询、分页或排序取数据的逻辑；在需求变更时安全地升级数据库版本而不丢数据；把数据库操作从组件里抽出来，做成独立的服务层供多个页面调用。这些能力放到 Electron 桌面应用里同样成立，因为渲染进程用的还是同一套 IndexedDB。

资料怎么配合练习

资料包里的内容是按章节推进的，不要只看视频不动手。建议边看边在本地建一个空项目，把示例里的表结构照着自己的需求改一遍，比如把课程示例的字段换成你手头项目真正要存的数据，再跑一遍增删改查。遇到版本升级那部分，刻意制造一次结构变更，观察旧数据是否还在。项目实战的代码不要直接复制，先自己写一版，再对照差异，这样才知道哪些地方是 Dexie 帮你省掉的、哪些是必须自己处理的边界。

整体上，这一章属于项目里"补基础设施"的一环，不炫技但绕不开。如果你的应用需要离线可用、需要保存用户草稿或本地缓存，它值得认真过一遍；如果只是临时存个开关状态，localStorage 就够了，不必上这套。