如何在Svelte中用each块绑定数组内的多个store到输入框？

问题描述 #

我有一个数组，每个对象都带有store属性，目前可以将数组中的单个对象绑定到输入框，但无法使用each块批量绑定所有对象。

问题的核心限制是：

Stores必须在组件的顶层声明（这可能会在Svelte的未来版本中更改）

我的需求是用each块为列表中的所有store添加输入框，且每个项都需要是独立的store，以便后续创建带有自定义set逻辑的自定义store。

当前代码配置：

<script>
    const rootStore = writable([
        {name: writable("Hello")},
        {name: writable("World")},
        {name: writable("Worlds")},
    ])

    $: firstName = $rootStore[0].name
    $: allNames = $rootStore.map(item => item.name);
</script>

单个输入框绑定有效，但each块中的绑定无法工作：

Edit me:
<input bind:value={$firstName}>

{#each $allNames as name}
    Edit me:
    <input bind:value={$name}>
{/each}

解决方案 #

解决这个问题的关键是通过子组件封装单个store的输入逻辑，利用子组件独立的上下文绕开Svelte对store声明位置的限制。

步骤1：创建子组件（如NameInput.svelte） #

将单个store的输入绑定逻辑封装到子组件中，子组件顶层接收store后即可正常使用$语法：

<script>
    export let nameStore;
</script>

Edit me:
<input bind:value={$nameStore}>

步骤2：修改父组件代码 #

在父组件中循环渲染子组件，并将每个项的store传递给子组件：

<script>
    import { writable } from 'svelte/store';
    import NameInput from './NameInput.svelte';

    const rootStore = writable([
        {name: writable("Hello")},
        {name: writable("World")},
        {name: writable("Worlds")},
    ])
</script>

<!-- 单个项的绑定也可以用嵌套$语法 -->
Edit me:
<input bind:value={$($rootStore[0].name)}>

{#each $rootStore as item}
    <NameInput nameStore={item.name} />
{/each}

原理说明 #

子组件拥有独立的组件上下文，在子组件顶层接收的nameStore属于合法的顶层store声明，因此可以正常使用$语法进行双向绑定。通过each循环渲染子组件，就能批量为所有store添加输入框，同时保留每个store的独立性，完全满足后续扩展自定义store逻辑的需求。

内容的提问来源于stack exchange，提问作者watermelon91