在 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}部分returnsundefined

Answer 1

这目前不可能 — 'contextual stores' (#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。

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

Accessing Store's value inside loop in SvelteJS v3

svelte

svelte-store