Vue 中的反应式 Dexie 查询

Question

我正在使用 Dexie 并想在我的 Vue 3 前端中实现它。

在 mount() 方法中，我使用以下示例查询数据库并将其分配给 Vue 模板中的局部变量，然后呈现该变量。

const oldFriends = await db.friends
        .where('age').above(75)
        .toArray(); 

this.friends = oldFriends;

现在我遇到这样一种情况，网络工作者更改了 IndexedDB，并通过 Dexie 将新值写入其中（因此在本例中，添加了另一个朋友）。

现在我如何让我的 Vue 组件注意到这个更新并呈现“新”朋友 - 这样 Dexie 查询就会变得反应？

Answer 1

编辑：Here's a sample我试图利用我有限的 vue 知识来创建

您需要 npm install dexie@next 并从“dexie”导入 { liveQuery }。

这项新功能是一年前推出的，只要它只查询您的数据库，您就可以将异步函数转换为可观察函数。

因此，有 'liveQuery' 和 'useLiveQuery'。前者是与框架无关的，包含在 dexie 库本身中，后者只是在它之上的一些反应糖。

Reactive Dexie-Query in Vue