外部导入变量值变化时如何触发Svelte组件更新

Svelte的响应式是编译阶段通过静态分析实现的，默认仅会追踪两类值的变化：

• 组件<script>标签顶层声明的let/var变量
• 满足Svelte store契约（带有subscribe订阅方法的对象）的值

从外部JS模块直接导入的普通原始类型变量，不会被Svelte纳入响应式追踪范围，变量值发生变化时Svelte无法感知，因此不会触发组件重渲染，也就是示例中出现的点击按钮后值变了但页面不更新的问题。

这是Svelte官方提供的跨组件、跨模块共享响应式状态的方案，无需额外依赖，会自动处理订阅、更新、组件卸载时的取消订阅逻辑，适配绝大多数共享状态场景。

1. 修改flag.js，将普通变量替换为可写store：

import { writable } from 'svelte/store';

// 创建可写store，初始值为false
export const flag = writable(false);

export function setFlag() {
  // 若需要点击后直接将flag设为true，替换为 flag.set(true) 即可
  flag.update(currentVal => !currentVal);
}

2. 修改App.svelte，读取store值时在变量名前加$前缀，Svelte会自动完成响应式绑定：

<script>
    import {flag, setFlag} from './flag.js'
</script>

<!-- $flag 是Svelte提供的store语法糖，值变化时自动触发组件重渲染 -->
{#if $flag}
    <h1>Flag present</h1>
{/if}

<button on:click={() => setFlag()}>Toggle</button>

如果是非常简单的单一场景，不想引入store，可以将外部值同步到组件内部的本地响应式变量，修改状态时手动同步新值：

1. 调整flag.js，让修改方法返回更新后的值：

export let flag = false
export function setFlag() {
    flag = true;
    return flag;
}

2. 调整App.svelte，使用组件内的本地响应式变量承接状态：

<script>
    import {flag as initialFlag, setFlag} from './flag.js'
    // 组件内部的响应式变量，初始化时导入外部值
    let localFlag = initialFlag;

    const handleClick = () => {
        // 拿到更新后的新值，赋值给本地变量触发重渲染
        localFlag = setFlag();
    }
</script>

{#if localFlag}
    <h1>Flag present</h1>
{/if}

<button on:click={handleClick}>Toggle</button>

注意：该方案存在明显局限性，只能感知当前组件内调用setFlag产生的变化，如果其他模块也修改了flag.js中的变量，组件无法自动同步更新，仅适合状态修改入口唯一的简单场景。

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