Svelte 5中对象内Writable存储绑定shadcn Select组件的问题

问题原因 #

Svelte 5的$store订阅语法仅支持直接作用于当前组件作用域内声明的顶层store变量。当store嵌套在对象属性（如setting.store）中时，$setting.store无法被Svelte正确识别为store订阅，导致双向绑定失效。

解决方案 #

方案1：本地临时变量中转（推荐） #

在{#each}循环内部，将嵌套的store赋值给当前作用域的临时变量，让Svelte能正确识别store订阅：

{#each Object.entries(settings) as [key, setting]}
    {#const localStore = setting.store}
    <div class="flex items-center space-x-2">
        <p class="min-w-[48px]">{$language === 'ru' ? setting.nameRu : setting.name}:</p>
        <Select.Root type="single" name={key} bind:value={$localStore}>
            <Select.Trigger>
                {$settingLabel[key] ?? ($language === 'ru' ? 'Выберите ' + setting.nameRu : 'Select ' + setting.name)}
            </Select.Trigger>
            <Select.Content>
                {#each setting.values as value}
                    <Select.Item value={value.value}>
                        {$language === 'ru' ? value.labelRu : value.label}
                    </Select.Item>
                {/each}
            </Select.Content>
        </Select.Root>
    </div>
{/each}

原理：临时变量localStore属于当前循环迭代的作用域，Svelte可以正确解析$localStore的订阅，实现双向绑定。

方案2：手动处理绑定逻辑 #

放弃bind:value，通过手动设置value属性和监听change事件实现双向绑定：

{#each Object.entries(settings) as [key, setting]}
    <div class="flex items-center space-x-2">
        <p class="min-w-[48px]">{$language === 'ru' ? setting.nameRu : setting.name}:</p>
        <Select.Root 
            type="single" 
            name={key} 
            value={$setting.store}
            on:change={(e) => setting.store.set(e.detail.value)}
        >
            <Select.Trigger>
                {$settingLabel[key] ?? ($language === 'ru' ? 'Выберите ' + setting.nameRu : 'Select ' + setting.name)}
            </Select.Trigger>
            <Select.Content>
                {#each setting.values as value}
                    <Select.Item value={value.value}>
                        {$language === 'ru' ? value.labelRu : value.label}
                    </Select.Item>
                {/each}
            </Select.Content>
        </Select.Root>
    </div>
{/each}

原理：直接将store当前值传给value属性，监听Select的change事件，调用store的set方法更新值，模拟双向绑定效果。

额外优化：移除不必要的await #

原代码中{#await settingLabel[key] then label}是多余的，derived store会立即计算初始值，可直接使用$settingLabel[key]简化代码，如上述方案所示。

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