Svelte Store绑定异常：多组件无法同步获取存储值

我需要将若干数据点以卡片网格形式展示，鼠标悬停任意卡片时更新Svelte Store中的值（当前悬停数据点的id），该值要在多个组件中使用。目前Store的值更新看似正常，但无法在多个组件中同步获取到数据——只有最后一个数据点的橙色区域会显示当前悬停的id，其他卡片不更新。

你的keyStore是一个工厂函数，每次调用keyStore()都会创建一个全新的Store实例。这意味着：

• App组件和每个Datapoint组件拿到的都是独立的Store，彼此完全隔离
• 最后一个Datapoint组件的Store覆盖了全局的subscribe和set变量，导致只有它能响应更新

1. 将Store改为单例模式 #

修改keys.store.js，直接创建并导出一个唯一的Store实例，而不是工厂函数：

// keys.store.js
import { writable } from 'svelte/store';

let status = {};
const { subscribe, set } = writable({});

function setKey(key, value) {
    status = { ...status, [key]: value };
    set(status);
}

export const keyStore = {
    subscribe,
    setKey,
    clear: () => set({}) // 修复原代码中初始值与clear值不一致的问题
};

2. 修改组件中的Store引用 #

所有组件直接导入这个单例Store，不再调用keyStore()：

App.svelte 修改后 #

<script>
    import Datapoint from './Datapoint.svelte';
    import { keyStore } from "./keys.store";

    let activeId = null;
    $: activeId = $keyStore.activeDatapointId;
    
    const datapoints = [
        {"id":2,"name":"Data Point 2"},
        {"id":37,"name":"Data Point 37"},
        {"id":36,"name":"Data Point 36"}
    ];
</script>
<hr>
hovered id: <span>{activeId}</span>
<hr>
{#each datapoints as datapoint}
    <Datapoint {datapoint} />
{/each}

Datapoint.svelte 修改后 #

<script>
    import { keyStore } from "./keys.store";

    export let datapoint;
    let activeId = null;

    $: activeId = $keyStore.activeDatapointId;

    function enter() {
        keyStore.setKey('activeDatapointId', datapoint.id);
    }

    function leave() {
        keyStore.setKey('activeDatapointId', null);
    }
</script>

<div on:mouseenter={enter} on:mouseleave={leave}>
    {datapoint.name}<br>
    hovered id: <span style="background: orange">{activeId}</span>
    <hr>
</div>

额外优化点 #

• 移除了不必要的id中间变量，直接使用datapoint.id
• 简化了响应式语句的写法
• 修复了clear方法中设置[]的错误，改为和初始状态一致的{}

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