Dexie.js 数据库删除后数据重复问题的分析与解决方案

问题现象

在使用Dexie.js这个基于IndexedDB的JavaScript库时，开发者发现了一个奇怪的现象：当手动删除数据库后不刷新页面，直接重新填充数据时，通过useLiveQuery查询会返回重复的数据对象。然而，Chrome开发者工具检查IndexedDB时却显示数据库中没有重复的行记录。只有在删除数据库后立即刷新页面，这个问题才会消失。

问题根源

经过深入分析，这个问题源于Dexie.js的liveQuery缓存机制。具体来说：

1. 缓存未及时更新：当数据库被手动删除后，Dexie.js的查询缓存没有正确感知到这一变化，导致缓存中保留了旧数据。

2. 双重数据问题：重新填充数据时，缓存系统错误地将新旧数据合并，而不是完全替换，从而产生了数据重复的现象。

3. 复合索引的特殊情况：在使用复合索引作为主键的情况下，问题表现得更为明显，特别是当使用where().equals().first()查询方式时。

解决方案

临时解决方案

对于急需解决问题的开发者，可以采用以下临时方案：

const db = new Dexie('dbName', { cache: 'disabled' });

这个方案通过禁用缓存来避免问题，虽然会影响性能，但能确保数据一致性。

永久解决方案

Dexie.js开发团队已经在新版本中修复了这个问题。建议开发者：

1. 升级到最新版本的Dexie.js
2. 检查所有使用liveQuery的地方，确保查询方式是最优的

最佳实践

1. 优先使用get()方法：

// 推荐方式
const data = useLiveQuery(() => {
  return db.table.get(primaryKey);
}, [deps]);

// 不推荐方式
const data = useLiveQuery(() => {
  return db.table.where(index).equals(value).first();
}, [deps]);

2. 正确处理数据库重置： 当需要重置数据库时，最佳实践是：

• 调用db.delete()
• 刷新页面让应用完全重新初始化
• 避免在不刷新页面的情况下直接重新填充数据

3. 复合索引使用注意事项： 对于使用复合索引作为主键的表，要特别注意查询方式的一致性，避免混合使用不同查询方法。

技术深入

这个问题的本质是缓存一致性问题。Dexie.js为了提高性能，实现了查询结果的缓存机制。但在数据库被外部操作（如手动删除）时，缓存系统没有正确的失效机制，导致：

1. 缓存未感知底层存储的变化
2. 重新填充数据时，缓存系统错误处理了数据版本
3. React的渲染机制与缓存系统产生了不预期的交互

在复合索引场景下，问题更为复杂，因为：

• 索引结构更复杂
• 缓存键生成逻辑可能有缺陷
• 数据更新路径更多样

总结

Dexie.js作为优秀的IndexedDB封装库，大大简化了前端数据库操作。但在使用高级功能如liveQuery时，开发者需要了解其内部机制，特别是缓存行为。这次的问题提醒我们：

1. 数据库操作要考虑缓存一致性
2. 不同的查询方法可能有不同的缓存行为
3. 在关键业务场景要考虑禁用缓存
4. 保持库版本更新以获取最新修复

通过理解这些问题背后的原理，开发者可以更好地使用Dexie.js构建健壮的Web应用。