Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

SvelteKit store undefined when accessed from a different component

$
0
0

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.


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>