Vue 中的反应式 Dexie-Query

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 }。

这一新功能是在一年前引入的，它允许您将异步函数转换为可观察对象，只要它只查询您的数据库即可。

在这些发行说明中有描述：https://github.com/dfahlander/Dexie.js/releases/tag/v3.1.0-alpha.1

在以下博客上：https://medium.com/dexie-js/awesome-react-integration-coming-f212c2273d05

所以，有“liveQuery”和“useLiveQuery”。前者是与框架无关的，包含在 dexie 库本身中，后者只是在其之上的一些反应糖。