0
296
ViewsSvelte - Trying to access a 'readable' object within 'store.js' returns 'undefined'
As you can see in the image below, you can access a normal Object (which is to be expected) but not a readable one inside stores.js.
App.svelte
<script>
import { myStuff, myStuff2 } from './stores.js';
</script>
<h1>This is {$myStuff.TEST}</h1>
<h1>This is {myStuff2.TEST}</h1>
stores.js
import { readable } from 'svelte/store';
export const myStuff = readable({
TEST: "HELLO"
});
export const myStuff2 = {
TEST: "HELLO 2"
};
// Doesn't work
console.log("TEST FROM STORE: " + myStuff.TEST);
// Works
console.log("TEST FROM STORE: " + myStuff2.TEST);
Why does this happen?
The Tutorial mentions briefly that you might get an undefiend but it doesn't elaborate much past that and the Docs don't mention that possible outcome as of writing this.
Screenshot of the example from the marked answer:
2 answers
Answer question0
The way stores work in Svelte is that they wrap your value in a class which doesn't have a direct way to get the stored value. You would need to subscribe to it to get it. There's also a get method which does the same under the hood.
So in your code this would print the value. It will also print the new values as it changes.
const unsub=mystuff.subscribe(val=> console.log("CURRENT VALUE OF TEST FROM STORE: " + val.TEST))
unsub()
//this does the same thing:
import { get } from 'svelte/store';
console.log("TEST FROM STORE: " + get(myStuff).TEST);
In the .svelte files the $____ notation does this subscription for you to make it more convenient to use it.
0
You can use get:
Generally, you should read the value of a store by subscribing to it and using the value as it changes over time. Occasionally, you may need to retrieve the value of a store to which you're not subscribed. get allows you to do so.
For example:
import { readable, get } from 'svelte/store';
console.log("TEST FROM STORE: " + get(myStuff).TEST);