Vue 中的反应式 Dexie-Query

Posted 2023-02-21

【中文标题】Vue 中的反应式 Dexie-Query

【英文标题】：Reactive Dexie-Query in Vue

【发布时间】：2021-11-28 06:22:49

【问题描述】：

我正在使用 Dexie，并希望在我的 Vue 3 前端实现这一点。

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

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

this.friends = oldFriends;

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

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

【问题讨论】：

我发现 useLiveQuery() 用于反应 - 这正是我在 Vue 中所需要的......

【参考方案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 库本身中，后者只是在其之上的一些反应糖。

【讨论】：

嘿大卫。很高兴得到您个人的回复。也感谢您在该项目中所做的出色工作。我可以在我的 Vue 项目中使用此实时查询还是仅做出反应？

liveQuery 与框架无关。这是一个例子（我对 vue 的了解有限）：codesandbox.io/s/friendly-tereshkova-b6dfi?file=/src/components/…