在 SvelteJS v3 中的循环内访问 Store 的值

Question

我正在从具有store某些属性的对象数组构建仪表板。每个商店都从不同的来源独立更新。

我的问题是我无法读取循环store内的值each。

为了简化以下代码示例，我使用tweened代替store

以下代码也可在 Svlete REPL https://svelte.dev/repl/9a17102e7d32471a940ba007e5b56db0?version=3.6.7

<script>
    import { tweened } from 'svelte/motion';

    const data = [{
        label: 'one',
        value: tweened(0)
    }, {
        label: 'two',
        value: tweened(0)
    }]

</script>

<ul>
    {#each data as item}
        <li>{item.label} ({item.$value})</li>
    {/each}
</ul>

该{item.$value}部分收益undefined

Answer 1

这目前是不可能的——“上下文商店”( #2016 )存在一个问题，它可以让你做这种事情......

<ul>
  {#each data as { label, value }}
    <li>{label} ({$value})</li>
  {/each}
</ul>

......但我们还没有到那里。同时，解决方法是将存储传递给组件：

<ul>
  {#each data as item}
    <ListItem label={item.label} value={item.value}/>
  {/each}
</ul>

在组件内部，您将拥有export let label, value，并且可以$value按预期使用。