如何使用输入标签更新 Svelte 可写存储值

Question

我在 Svelte 中有一家可写商店，编号为 object。我想显示属性并能够以用户身份更改属性值。

我能够使用 on:input 事件获取要在输入标签中显示的属性和值以更新商店中的值，但我收到一条错误消息，指出 sampleStore.set 不是 function。我试图添加一个自定义更新 function 到商店，但我遇到了同样的错误。

最好的方法是什么？

下面的示例代码

商店.js

import { writable } from 'svelte/store';

function createSampleStore() {
  const sampleStore = writable({
    property1a: 'value1a',
    property1b: 'value1b',
    etc...
  }

  return {
    subscribe: sampleStore.subscribe,
    updateValue: (propertyName, propertyValue) =>
      sampleStore.update((o) => {
        o[propertyName] = propertyValue;
        return o;
      }),
  };
}

export const sampleStore = createSampleStore();

信息显示.svelte

<script>
  import {sampleStore} from './sampleStore.js';

  const propertyNames = Object.keys($sampleStore);
  $: console.log($sampleStore);
</script>

<ul>
  {#each propertyNames as propertyName}
    <li>
      {propertyName}:
        <input
          on:input={(value) =>
           sampleStore.updateValue(propertyName, propertyValue)}
           bind:value={$sampleStore[propertyName]}
        />
    </li>
  {/each}
</ul>

我尝试调整输入标签中显示的值并更新商店中的值，但我一直得到 the.set is not a function。

Answer 1

对输入value的绑定创建了一个获取/设置关系，您应该只传递值并使用事件将其取出：

<input
  on:input={e => sampleStore.updateValue(propertyName, e.target.value)}
  value={$sampleStore[propertyName]} /> <!-- no bind here -->

您也不需要自定义存储来执行此操作，并且可以直接使用writable ：

<input bind:value={$store[propertyName]} />

REPL