I'm attempting to set a store within one Svelte component and access it another. I immediately log the store after setting it (in Component.svelte
), and it's what I expect however my reactive statement in a different file (the root +page.svelte
) sees it as undefined. The store is being set as it contains an initial value "initial"
(logged at the start) which is then removed after a node is clicked and the set
function is called.
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); // contains the correct value ...
+page.svelte
<script> import { selectedNodeStore, someOtherStore } from '../stores'; ... $: console.log("retrieved node from store: " + get($selectedNodeStore)[0]?.name) // is undefined</script>
Component.svelte
is written in JavaScript as I'm using a library to create a graph of nodes, and setting the store from within that.
What I find more confusing is that I have another store that's set up in the same way, and I set it in async functions and use it in a similar way and have no issues.