如何在Dexie.js + vanilla JS中订阅数据变更？

核心实时查询API：liveQuery() #

Dexie的liveQuery是框架无关的原生API，支持vanilla JS环境下订阅查询结果的实时更新。它会自动监听查询涉及的表数据变更，当数据发生增删改时重新执行查询并返回最新结果。

基本使用示例：

import { liveQuery } from 'dexie';

// 假设已初始化Dexie实例db，包含users表
const liveAdultUsers = liveQuery(() => db.users.where('age').above(18).toArray());

// 订阅结果更新
const unsubscribe = liveAdultUsers.subscribe({
  next: (latestUsers) => {
    // 处理最新数据，比如更新DOM或Preact Signal
    console.log('实时更新的成年用户列表:', latestUsers);
  },
  error: (err) => {
    console.error('实时查询出错:', err);
  }
});

// 取消订阅（不再需要时调用）
// unsubscribe();

细粒度数据变更监听：表钩子（Table Hooks） #

如果需要监听单条数据的增删改操作而非整个查询结果，可以使用Dexie的表钩子API：

• db.table.hook('creating'): 监听数据创建事件
• db.table.hook('updating'): 监听数据更新事件
• db.table.hook('deleting'): 监听数据删除事件

钩子使用示例：

// 监听users表的新增操作
const unhookCreate = db.users.hook('creating', (primaryKey, newUser, transaction) => {
  console.log('即将创建用户:', primaryKey, newUser);
});

// 监听users表的更新操作
const unhookUpdate = db.users.hook('updating', (changes, primaryKey, oldUser, transaction) => {
  console.log('即将更新用户:', primaryKey, '变更内容:', changes);
});

// 取消钩子监听
// unhookCreate();
// unhookUpdate();

结合Preact Signals的实践 #

你可以在liveQuery的订阅回调中直接更新Signal的值，实现状态同步：

import { signal } from '@preact/signals';
import { liveQuery } from 'dexie';

// 定义Signal存储实时数据
const adultUsersSignal = signal([]);

// 订阅实时查询并更新Signal
liveQuery(() => db.users.where('age').above(18).toArray())
  .subscribe({
    next: (users) => {
      adultUsersSignal.value = users;
    }
  });

内容的提问来源于stack exchange，提问作者nichoth