Я пытаюсь установить хранилище в одном компоненте 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 подходит как для начинающих, так и для опытных разработчиков благодаря своей простоте и мощности.
Я разобрался, это было несоответствие типов, когда я настраивал магазин в 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);
...
Помните, дети, строгая типизация спасает жизни.