Svelte自动订阅失效求助：onMount中$语法无法更新元素状态

你的核心问题在于：onMount是一次性生命周期钩子，只会在组件挂载时执行一次，即便里面使用了$自动订阅store，后续store更新也不会重新触发这段代码，所以spinner的DOM状态不会跟着shouldShowSpinner变化。

错误原因拆解 #

$shouldShowSpinner的自动订阅特性，只有在反应式上下文（比如反应式语句、模板渲染逻辑）中才会追踪变化并触发更新。而onMount的回调是一次性执行的，不属于这个上下文范畴——它只会在组件挂载完成后读取一次store的值，之后store再变化也不会重新运行这段DOM操作代码。

解决方案1：使用反应式语句（推荐） #

把DOM操作逻辑放到反应式语句中，这样每次$shouldShowSpinner变化时，代码都会自动重新执行：

<!-- Spinner.svelte -->
<script lang="ts">
    import { shouldShowSpinner } from './AppStore';
    let spinnerDiv;

    // 反应式语句：$shouldShowSpinner变化时自动执行
    $: if (spinnerDiv) {
        spinnerDiv.style.display = $shouldShowSpinner ? "inline-block" : "none";
    }
</script>

<main>
   <div id="spinner" bind:this={spinnerDiv}>
   </div>
</main>

加if (spinnerDiv)是为了避免组件初始化时，DOM元素还未绑定就执行样式操作导致报错。

解决方案2：直接在模板中绑定样式（更简洁的Svelte写法） #

完全不需要手动操作DOM，利用Svelte的模板绑定特性直接关联store状态：

<!-- Spinner.svelte -->
<script lang="ts">
    import { shouldShowSpinner } from './AppStore';
</script>

<main>
   <div id="spinner" style:display={$shouldShowSpinner ? "inline-block" : "none"}>
   </div>
</main>

这种写法完全符合Svelte的声明式风格，由框架自动处理状态变化到DOM更新的映射，既简洁又不容易出错。

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