当前位置：首页 > article >正文

PouchDB + Dexie.js：构建高效的离线优先同步方案

article 2025/1/18 7:10:18

🚀 PouchDB + Dexie.js：构建高效的离线优先同步方案

在现代 Web 应用中，离线优先 (Offline-First) 已成为提升用户体验的关键策略。尤其是在网络环境不稳定的情况下，用户仍然可以访问和操作数据，并在网络恢复后自动同步。

PouchDB 和 Dexie.js 是 IndexedDB 生态中两款强大的库，结合它们可以构建一个高效、可扩展的离线优先同步方案。

在这篇文章中，我们将深入探讨：

Dexie.js 作为 IndexedDB 的高效查询层
PouchDB 作为离线存储和远程同步工具
如何让它们协同工作，优化查询性能和同步效率
适用场景、最佳实践和性能优化策略

🌟 为什么结合 PouchDB 和 Dexie.js？

✅ 适用场景

需要高效的本地查询
- PouchDB 的 find() 查询性能一般，适合基本查询，但 IndexedDB 查询较慢。
- Dexie.js 提供事务、索引、批量操作，能大幅优化查询效率。
需要离线存储和自动同步
- PouchDB 能本地存储数据，并与 CouchDB 兼容的服务器同步。
- 当用户恢复网络时，PouchDB 会自动同步数据。
本地缓存 + 远程同步的最佳实践
- Dexie.js 作为本地查询层，加速数据读取。
- PouchDB 作为同步层，负责数据存储和远程同步。

❌ 不适用场景

如果数据量很小（<1000 条），仅使用 PouchDB 也可以。
如果查询场景很简单，PouchDB 的 find() 可能够用。
如果仅需要远程同步，Dexie.js 可能不是必需的。

🏗️ 如何结合 PouchDB 和 Dexie.js？

1️⃣ 使用 Dexie.js 创建本地数据库

Dexie.js 是 IndexedDB 的封装库，提供高效的事务管理和查询优化。

import Dexie from "dexie";

// 定义本地数据库
class LocalDB extends Dexie {
  items: Dexie.Table<{ id: string; data: any }, string>;

  constructor() {
    super("LocalDatabase");
    this.version(1).stores({
      items: "id", // 使用 id 作为主键
    });
    this.items = this.table("items");
  }
}

const db = new LocalDB();
export default db;

2️⃣ 使用 PouchDB 进行本地存储和远程同步

PouchDB 允许我们存储数据在 IndexedDB，并支持远程 CouchDB 兼容数据库同步。

import PouchDB from "pouchdb";
import PouchFind from "pouchdb-find";

PouchDB.plugin(PouchFind);

// 创建本地数据库
const localDB = new PouchDB("local_database");
// 远程数据库（CouchDB 或兼容服务器）
const remoteDB = new PouchDB("http://your-server.com:5984/your-database");

// 监听数据库变化
localDB.changes({
  since: "now",
  live: true,
  include_docs: true,
}).on("change", (change) => {
  console.log("数据变更:", change);
});

3️⃣ 在 PouchDB 和 Dexie.js 之间同步数据

📝 数据存入 PouchDB，同时存入 Dexie.js

async function saveItem(id: string, data: any) {
  const doc = { _id: id, data };

  // 存入 PouchDB（用于远程同步）
  await localDB.put(doc);
  
  // 存入 Dexie.js（提高本地查询速度）
  await db.items.put({ id, data });
}

🔄 监听 PouchDB 变化并更新 Dexie.js

localDB.changes({
  since: "now",
  live: true,
  include_docs: true,
}).on("change", async (change) => {
  if (change.doc) {
    await db.items.put({ id: change.doc._id, data: change.doc.data });
  }
});

🧹 定期清理 Dexie.js 避免数据冗余

async function syncToDexie() {
  const allDocs = await localDB.allDocs({ include_docs: true });
  await db.items.clear(); // 清空本地 Dexie.js

  for (const row of allDocs.rows) {
    if (row.doc) {
      await db.items.put({ id: row.doc._id, data: row.doc.data });
    }
  }
}

🚀 Vue 项目中如何集成？

在 Vue 组件中获取数据

<script setup lang="ts">
import { ref, onMounted } from "vue";
import db from "@/db"; // Dexie.js
import { startSync } from "@/pouchdb"; // PouchDB 同步

const items = ref([]);

onMounted(async () => {
  items.value = await db.items.toArray(); // Dexie.js 加载本地数据
  startSync(); // 启动 PouchDB 同步
});
</script>

<template>
  <div>
    <h2>离线数据列表</h2>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.data }}</li>
    </ul>
  </div>
</template>