Svelte中如何访问数组内存储的svelte-forms字段store

我正在使用svelte-forms，需要创建一个由fields组成的数组。

field()会返回一个writable store，是用于创建可充当输入控制器的新表单项的便捷函数。

现有如下使用场景：

<script lang="ts">
    let fields = [field("f1","f1",[]), field("f2","f1",[])]
</script>

{#each fields as field}
   {$field}
{/each}

需求是操作该fields数组，实现访问数组中任意一个field store的效果。

数组中存储的每个元素本身就是field()返回的writable store实例，和普通数组元素的访问逻辑完全一致，不需要做特殊转换：

• 脚本中访问：直接通过数组下标取值即可，配合svelte/store提供的get方法可以直接读取store瞬时值，也可以正常调用store的set、update方法修改值

  import { get } from 'svelte/store'
  
  // 取索引为0的第一个field store
  const firstFieldStore = fields[0]
  // 读取store当前值
  const firstFieldValue = get(firstFieldStore)
  // 修改store值
  firstFieldStore.set('新的字段值')
  

  如果不想依赖索引定位，可以在初始化时把数组改成带唯一标识的对象结构，后续通过标识查找更稳定：

  let fields = [
    { name: 'f1', store: field("f1","f1",[]) },
    { name: 'f2', store: field("f2","f1",[]) }
  ]
  // 按name查找对应store
  const f2Store = fields.find(item => item.name === 'f2').store
  

• 模板中访问：直接通过下标定位到对应store，加$前缀即可直接读取值、做双向绑定

  <!-- 读取第二个字段的值 -->
  <p>第二个字段当前值：{$fields[1]}</p>
  <!-- 给第一个字段绑定输入框 -->
  <input type="text" bind:value={$fields[0]} />
  

注：原示例代码中数组定义末尾缺少闭合方括号]，运行前需要补全，否则会触发语法错误。

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