Svelte .set 不是函数

Question

我正在尝试创建一个带有 svelte 商店的待办事项应用程序。但是我遇到了一个我无法解决的错误。

我曾尝试使用商店来管理我所有的所有任务数据，即使它不是必需的，但我想看看商店如何在 svelte 中工作，但我有一个错误，我真的不知道为什么。

//App.svelte

<script>
  import { onMount } from "svelte";
  import { tasks } from "./stores";
  import Item from "./assets/Item.svelte";

  var itemText = "";

  function addHandler() {
    var item = {
      value: itemText,
      id: Math.random(),
    };

    itemText = "";
    tasks.add(item);
    tasks.save();
  }

  onMount(() => {
    tasks.load();
  });
</script>

{#each $tasks as task (task.id)}
  <Item bind:value={task.value} />
{/each}

<input type="text" bind:value={itemText} />
<button on:click={addHandler}>Add Item</button>


//Item.svelte

<script>
    import { tasks } from "../stores.js";
    export let value = null;

  $: {
    if (value != null) {
      tasks.save();
      console.log($tasks);
    }
  }
</script>

<div>
  <input bind:value />
</div>

//stores.js
import { writable } from "svelte/store";

function list() {
  const { subscribe, set, update } = writable([]);

  return {
    subscribe,
    save: () => {
      update((items) => {
        localStorage.setItem("items", JSON.stringify(items));
        return items;
      });
    },
    add: (item) => update((items) => [...items, item]),
    remove: (item) => update((items) => items.filter((i) => i !== item)),
    load: () => {
      const items = JSON.parse(localStorage.getItem("items"));
      if (items) set(items);
    },
    update,
  };
}

错误：

export var tasks = list();

error: App.svelte:25 Uncaught TypeError: tasks.set is not a function
    at Array.item_value_binding (App.svelte:25:31)
    at Object.item_value_binding (App.svelte:4:42)
    at index.mjs:2020:31
    at HTMLInputElement.input_input_handler (Item.svelte:3:26)

这是我的代码我真的不知道是什么导致了这个问题如果你能帮忙我会很感激

Answer 1

您需要从 list() 返回 set 函数，因为您绑定到商店中的值之一：

<Item bind:value={task.value} />