时间戳

首页 > 解决方案 > 有没有更好的方法可以使用 dexie 在 svelte 中编写此代码？

svelte - 有没有更好的方法可以使用 dexie 在 svelte 中编写此代码？

问题描述

尝试学习 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>

顺便说一句，您可以将此代码隐藏在应用程序中吗？如果是这样，怎么做？还是没有必要？

标签： sveltedexie

解决方案

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

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

我已经在博客中介绍了这个功能以及它如何增强 ReactJS 应用程序，但是，直到最近我才知道 Svelte 商店合同，并且很高兴地了解到我们可以免费集成 Svelte。

推荐阅读