Сохранение SvelteKit не определено при доступе из другого компонента

Я пытаюсь установить хранилище в одном компоненте Svelte и получить к нему доступ к другому. Я сразу же регистрирую хранилище после его установки (в Component.svelte), и это то, чего я ожидаю, однако мой реактивный оператор в другом файле (корневой +page.svelte) видит его как неопределенный. Хранилище устанавливается, поскольку оно содержит начальное значение "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.info($selectedNodeStore); // contains the correct value

    ...

+page.svelte

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

    ...

    $: console.info("retrieved node from store: " + get($selectedNodeStore)[0]?.name) // is undefined
</script>

Component.svelte написан на JavaScript, поскольку я использую библиотеку для создания графа узлов и настраиваю хранилище изнутри.

Что меня больше сбивает с толку, так это то, что у меня есть другое хранилище, настроенное таким же образом, и я устанавливаю его в асинхронных функциях и использую его аналогичным образом, и у меня нет проблем.

🤔 А знаете ли вы, что...
Svelte подходит как для начинающих, так и для опытных разработчиков благодаря своей простоте и мощности.


60
1

Ответ:

Решено

Я разобрался, это было несоответствие типов, когда я настраивал магазин в Component.svelte, в котором вместо TypeScript использовался JavaScript. Мне нужно было установить массив, а не объект. Фиксированный код:

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.info($selectedNodeStore);

    ...

Помните, дети, строгая типизация спасает жизни.