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

Question

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

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

为了简化下面的代码示例，我使用 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) 有一个 Unresolved 问题，它可以让你做这种事情......

<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。