Svelte 5表单提交处理器中表单数据无响应问题求助

问题出在Svelte 5的响应性机制上——普通事件处理器默认不会自动追踪$state对象的属性更新，导致提交函数中拿到的是初始化时的状态快照。

以下两种方法可以解决：

方法1：用$()显式获取最新状态 #

在事件处理器中，通过$()包裹状态变量，强制读取最新的响应性值：

<script>
    const formData = $state({
        name: 'abc',
    })

    const saveData = (e) => {
        e.preventDefault()
        // 用$()获取最新的formData
        console.log($(formData))
    }
</script>

<form onsubmit={saveData}>
    <input type="text" bind:value={formData.name}/>
    <button type="submit">Create</button>
</form>

<pre>{formData.name}</pre>

方法2：将字段单独声明为$state变量 #

如果表单字段较少，可将每个字段单独声明为响应性变量，事件处理器中能直接获取最新值：

<script>
    const name = $state('abc')

    const saveData = (e) => {
        e.preventDefault()
        console.log({ name })
    }
</script>

<form onsubmit={saveData}>
    <input type="text" bind:value={name}/>
    <button type="submit">Create</button>
</form>

<pre>{name}</pre>

原理说明 #

Svelte 5的细粒度响应性中，仅在响应性上下文（如组件模板、$effect、响应性函数）中访问$state变量时，才会自动追踪更新。普通事件处理器属于非响应性上下文，因此需通过$()显式拉取最新状态；而单独声明的原始类型$state变量，在事件处理器中访问时会直接指向最新值。

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