SvelteKit跨组件访问Store时出现undefined问题求助

我在Svelte中用Store实现跨组件数据传递时遇到了问题：在<Component.svelte>里设置Store后立刻打印，值完全符合预期，但根组件<+page.svelte>的响应式语句读取到的结果却是undefined。Store初始值是包含"initial"的数组，点击节点调用set函数后初始值会被覆盖。

相关代码 #

stores.ts #

export type SelectedNode = {
    name: string;
    group: string;
    id: string;
}

const selectedNodeInit: SelectedNode[] = [<SelectedNode>({
    group: "",
    name: "initial",
    id: ""
})];
export const selectedNodeStore = writable(selectedNodeInit);

Component.svelte #

import { selectedNodeStore } from '../stores';

...

.onNodeClick(node => {
    let selectedNode = {
        name: node.id,
        group: node.group == 1 ? "one" : "two",
        id: node.id != null ? node.id : ""
    };

    selectedNodeStore.set(selectedNode);
    console.log($selectedNodeStore); // 此处输出正确的节点值

    ...

+page.svelte #

<script>
    import { selectedNodeStore, someOtherStore } from '../stores';

    ...

    $: console.log("从store获取的节点: " + get($selectedNodeStore)[0]?.name) // 此处输出undefined
</script>

<Component.svelte>采用JavaScript编写，因为需要集成一个节点图库。更费解的是，我有另一个配置完全相同的Store，在异步函数中设置并以类似方式使用却没有问题。

问题原因与修复方案 #

你犯了两个关键错误：

1. Store类型不匹配：初始化的Store是SelectedNode[]（数组类型），但onNodeClick里调用set时传入的是单个SelectedNode对象，而非数组。这会导致Store的结构从数组变成单个对象，<+page.svelte>里按数组取[0]自然会得到undefined。
2. 错误使用get()函数：$selectedNodeStore本身就是Store的当前响应式值，不需要再用get()包裹。get()的正确用法是传入Store对象（比如get(selectedNodeStore)），而非响应式变量$xxx。

修复步骤： #

1. 修正Component.svelte的set调用

把单个对象改成数组，保持类型一致：

selectedNodeStore.set([selectedNode]); // 用数组包裹单个节点对象

2. 修正+page.svelte的响应式语句

去掉多余的get()，直接使用响应式变量：

$: console.log("从store获取的节点: " + $selectedNodeStore[0]?.name)

如果是在非响应式场景下需要获取Store值，才需要用get()：

import { get } from 'svelte/store';

// 非响应式场景示例
const currentNodeName = get(selectedNodeStore)[0]?.name;

额外说明 #

另一个Store能正常工作，是因为它的初始化值和设置值类型一致，且没有错误使用get()。只要保持Store的类型一致性，并正确使用Svelte的响应式语法和get()函数，就能解决这个问题。

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