Svelte组件onMount时更新writable store值无效问题求助

正确解决方案 #

要可靠更新store中的对象属性，必须使用store提供的update或set方法，确保store能发出状态变更通知，触发组件重新渲染。

方案一：使用update方法（推荐，保留其他属性）

update方法接收回调函数，基于当前状态生成新状态：

<script>
    import { onMount } from "svelte";
    import { writable } from 'svelte/store';
    
    const myStore = writable({
      count: 1
    });
    
    function updateCount() {
      myStore.update(currentState => {
        // 展开原对象，仅修改count属性
        return { ...currentState, count: 0 };
      });
    }
    
    onMount(() => {
      updateCount();
    });
</script>

<h1>{$myStore.count}</h1>

方案二：使用set方法（直接替换整个状态对象）

如果不需要保留原对象的其他属性，直接用set替换整个状态：

function updateCount() {
  myStore.set({ count: 0 });
}

原代码失效原因 #

你直接修改$myStore.count = 0的操作，只是修改了当前订阅到的store值快照，但没有通知store本身状态变更。Svelte的store依赖明确的状态更新信号来触发组件渲染，这种直接修改引用类型属性的操作不会触发store的更新机制，所以组件无法感知到变化——哪怕控制台打印可能显示属性变了，组件也不会重新渲染。

至于setTimeout能临时解决，是因为延迟执行后组件初始渲染完成，store订阅机制完全生效，但这是不可靠的hack，不建议使用。

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