如何管理可写数组?

Question

我有一个随机大小的对象数组，每个对象包含一个name属性和一个state可写属性。我想反应性地访问存储中的值。

我在下面试过了，但是Svelte不允许你这样使用store

{#each pins as pin}
{@const state = pin.state}
<p>{pin.name} - {$state}</p>
<br/>
{/each}

我需要做一些与pins在我的脚本块，但我需要做的是不清楚。我该怎么做呢?

Answer 1

可能有两种方法:

• 将#each的内容提取到一个单独的组件中，这样您就可以为存储定义一个顶级变量，该变量可以通过属性传入，可以单独传入，也可以作为整个pin传入。如果整个pin被传入，你需要一个单独的赋值来使store成为顶级的。
解析所有store的值，例如通过映射数组的派生store。这有点复杂，可能会有一些开销。

说明后者的示例:

<script>
import { writable, derived, get } from 'svelte/store';

let items = [
{ id: 1, state: writable('state 1') },
{ id: 2, state: writable('state 2') },
{ id: 3, state: writable('state 3') },
];

$: resolvedItems = derived(
items.map(i => i.state),
// `get` is not reactive, but `derived` is
() => items.map(item => ({ ...item, state: get(item.state) })),
);
</script>
{#each $resolvedItems as { id, state }}
<div>{id} - {state}</div>
{/each}

REPL

(建议采用提取方法)