Vue中的反应性Dexie查询

Question

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

在挂载()方法中，我使用下面的示例查询数据库，并将其分配给Vue模板中的一个局部变量，然后呈现出来。

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

this.friends = oldFriends;

现在，我遇到了这样的情况: web工作者更改IndexedDB，并通过Dexie在其中写入新的值(因此在本例中，添加了另一个朋友)。

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

Answer 1

编辑：https://codesandbox.io/s/friendly-tereshkova-b6dfi?file=/src/components/DBItems.vue我试着用我有限的vue知识创建

您需要安装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’。前者是框架不可知论者，包含在右旋库本身，后者只是其中的一些反应糖。