有没有更好的方法来使用 dexie 以 svelte 编写此代码？

Question

正在尝试学习 svelte 和使用 dexie。是否有更好的方法从 indexedDB 获取数据到数组？

我的functions.js文件

export const db = new Dexie("todos");

db.version(1).stores({
  todo: "++id,note",
});

App.svelte

<script>
  import { onMount } from "svelte";
  import { db } from "./functions";

  let newnote = "";
  let addnote = (e) => {
    db.todo.add({ note: newnote });
    db.todo.toArray().then(items => {
      todos = items;
    });
  };

  $:todos = [];
  let start = () => {
    db.todo.toArray().then(items => {
      todos = items;
    });
  };

  onMount(() => {
    start();
  });
</script>

<main>
  <h1 id="title">ToDo</h1>
  <input type="text" id="newnote" bind:value={newnote} />
  <input type="button" value="Add" on:click={addnote} />

  <br>
  {#each todos as todo}
    {todo.note} <br>
  {/each}
</main>

顺便说一句，你能把这个代码隐藏在应用程序中吗？如果是这样，如何？还是没有必要？

Answer 1

通过使用来自 dexie@3.2.0 的新 liveQuery()，您将获得最简单的集成。

npm install dexie@latest

在以下代码和框中尝试一下：https://codesandbox.io/s/svelte-with-dexie-livequery-2n8bd?file=/App.svelte

翻译你的具体例子：

<script>
  import { liveQuery } from "dexie";
  import { db } from "./functions";

  let newnote = "";
  let addnote = (e) => {
    db.todo.add({ note: newnote });
  };

  const todos = liveQuery(
    () => db.todo.toArray()
  );
</script>

<main>
  <h1 id="title">ToDo</h1>
  <input type="text" id="newnote" bind:value={newnote} />
  <input type="button" value="Add" on:click={addnote} />

  <br>
  {#if $todos}
    {#each $todos as todo}
      {todo.note} <br>
    {/each}
  {/if}
</main>

一些解释：

Dexie 的 liveQuery() returns 与 rxjs、es-observable 提案以及 Svelte's store contract)
初始结果将是未定义的（这就是我们需要 #if todos 的原因），因为结果是异步的。
当您改变数据库时，您不需要关心重新查询 - 这会自动发生。
即使数据库是从另一个选项卡或 window 突变的，您的视图也会更新。
您的查询可以根据需要简单或复杂。它甚至可以是一个异步函数，等待连续多个查询和 returns 最终结果。它查询的所有内容都将被观察到，并且只要数据库以会影响所涉及的任何查询的方式发生变异，整个函数就会重新执行。观察是细粒度的以优化性能。例如，如果您查询所有带有特定标签 (db.todo.where({tags: 'sports'})) 的 todoItems，假设标签是一个 multiEntry intexed 数组，除非更新、添加带有该标签的 todoItem，否则不会发生更新或删除，或者如果另一个 todoItem 获得“运动”标签。

我已经 blogged about this feature 知道它如何增强 ReactJS 应用程序，但是，直到最近我才知道 Svelte 商店合同，并且很高兴地了解到我们有免费的 Svelte 集成。

有没有更好的方法来使用 dexie 以 svelte 编写此代码？

Is there a better way to write this code in svelte using dexie?

dexie

svelte