Svelte中导出的boolean变量无响应？技术问题求助

问题出在你用了<script context="module">导出变量——模块脚本里的变量属于模块作用域，不是Svelte组件的响应式状态，所以直接修改connected的值时，不会触发视图的自动更新。切换页面再返回时，组件重新渲染才会读取到最新值。

修复方案：使用Svelte Store #

Svelte的Store专门用于跨组件共享响应式状态，能自动触发视图更新。修改代码如下：

lib.svelte #

<script context="module">
import { writable } from 'svelte/store';
// 创建一个可写的store，初始值为false
export const connected = writable(false);

setTimeout(() => {
  // 更新store的值
  connected.set(true);
  console.log('fired true');
}, 4000)
</script>

App.svelte #

<script>
    import { connected } from "./lib.svelte";
</script>

<h1>
    Connection status [{$connected}]
</h1>

关键说明 #

• writable创建的store自带响应式能力，调用set()更新值时，所有订阅该store的组件都会自动同步视图。
• 在组件里用$前缀可以直接访问store的当前值，Svelte会自动帮你处理订阅和取消订阅的逻辑。

原方式失效的核心原因 #

<script context="module">里的代码仅在模块加载时执行一次，导出的是普通JavaScript变量，没有Svelte的响应式追踪机制。组件初始化时会读取一次变量值，但后续变量变化时，组件无法感知到变化，自然不会更新视图。

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