Dexie.js：IndexedDB的封装库

嘿，你有没有遇到过在开发应用时需要处理大量本地数据的情况？如果有，那你一定知道IndexedDB这个东西。虽然它功能强大，但直接使用起来有点繁琐。这时候，Dexie.js 就派上用场了！它是一个轻量级的IndexedDB封装库，只有大约25k的大小，却能让你轻松管理本地数据库。

为什么选择Dexie.js？

首先，Dexie.js的API设计得非常简洁易懂。如果你曾经被原生IndexedDB的复杂性困扰过，那么Dexie.js的简洁API绝对会让你眼前一亮。它让你可以用更少的代码实现更多的功能。

其次，Dexie.js与前端框架的集成也做得非常好。无论你用的是React、Vue、Svelte还是Angular，Dexie.js都能无缝地与它们结合，让你的组件实时反映数据库的变化。

如何开始使用Dexie.js？

开始使用Dexie.js非常简单。你只需要几步就能创建并查询你的数据库：

    
javascript复制
    
// 声明你的数据库
const db = new Dexie('MyDatabase');

// 声明表、ID和索引
db.version(1).stores({
    friends: '++id, name, age'
});

// 查询一些老朋友
const oldFriends = await db.friends
    .where('age').above(75)
    .toArray();

// 或者添加一个新朋友
await db.friends.add({
    name: 'Camilla',
    age: 25,
    street: 'East 13:th Street',
    picture: await getBlob('camilla.png')
});

    

与前端框架的集成

Dexie.js不仅仅是一个数据库管理工具，它还可以与各种前端框架无缝集成，实现实时数据更新。比如在React中，你可以使用useLiveQuery钩子来监听数据库的变化：

    
javascript复制
    
import { useLiveQuery } from "dexie-react-hooks";
import { db } from "./db";

export function FriendList () {
    const friends = useLiveQuery(async () => {
        return await db.friends
            .where("age")
            .between(18, 65)
            .toArray();
    });

    return <>
        <h2>Friends</h2>
        <ul>
            {
                friends?.map(friend =>
                    <li key={friend.id}>
                        {friend.name}, {friend.age}
                    </li>
                )
            }
        </ul>
    </>;
}

    

开启同步功能

如果你需要将本地数据与云端同步，Dexie.js也提供了简单的解决方案。只需几步，你就可以开启同步功能：

1. 在云端创建你的数据库：

       
   复制
       
   npx dexie-cloud create
   
       

   npx dexie-cloud create

2. 将你的应用源地址加入白名单：

       
   复制
       
   npx dexie-cloud whitelist http://localhost:3000
   
       

   npx dexie-cloud whitelist http://localhost:3000

3. 升级Dexie并安装dexie-cloud-addon：

       
   复制
       
   npm install dexie@latest
   npm install dexie-cloud-addon
   
       

   npm install dexie@latest npm install dexie-cloud-addon

4. 更新你的数据库声明：

       
   javascript复制
       
   import Dexie from "dexie";
   import dexieCloud from "dexie-cloud-addon";
   
   const db = new Dexie('MySyncedDB', {addons: [dexieCloud]});
   
   db.version(1).stores({
       friends: '++id, name, age'
   });
   
   db.cloud.configure({
       databaseUrl: "https://<yourdatabase>.dexie.cloud",
       requireAuth: true
   });
   
       

   import Dexie from "dexie"; import dexieCloud from "dexie-cloud-addon"; const db = new Dexie('MySyncedDB', {addons: [dexieCloud]}); db.version(1).stores({ friends: '++id, name, age' }); db.cloud.configure({ databaseUrl: "https://<yourdatabase>.dexie.cloud", requireAuth: true });

在我看来，Dexie.js真的是一个非常实用的工具，特别是对于那些需要处理本地数据的开发者来说。它不仅简化了开发流程，还提供了强大的同步功能，帮助你轻松实现本地与云端的数据管理。赶紧试试吧！