Svelte：在更新前验证/修改商店绑定答案

【问题标题】：Svelte: Validate / modify store bindings before updateSvelte：在更新前验证/修改商店绑定
【发布时间】：2022-10-17 22:49:18
【问题描述】：

我正在尝试在更新商店之前验证和修改商店值。当数字输入改变时运行。但是现在发生的情况是，当数字输入更改为错误值（-1 或更小）时，存储首先使用错误值更新，然后将其更改为正确值。这导致商店更新两次。

Store.js

import { writable } from 'svelte/store';

export const availableTrainingMaterials = writable({
    T1: 0
});

材料.js：

<script>
    import { availableTrainingMaterials } from '$stores';

    $: if ( $availableTrainingMaterials.T1 < 0 ) {
          $availableTrainingMaterials.T1 = 0;
       }
</script>

<div class="available-materials">
    <h2>I have these materials:</h2>
    <div>
        T1: <input bind:value={$availableTrainingMaterials.T1} type="number" />
    </div>
</div>

【问题讨论】：

标签： input event-handling svelte store

【解决方案1】：

您可以创建一个包含 set 函数的自定义存储，该函数用于更新存储，例如

import { writable } from 'svelte/store';

const { set: internalSet, subscribe } = writable({
    T1: 0
});
const set = value => {
    if (value.T1 < 0)
        value.T1 = 0;
    
    internalSet(value);
}

export const availableTrainingMaterials = { set, subscribe };

REPL

【讨论】：