Como puede ver en la imagen a continuación, puede acceder a un Object normal (que es de esperar) pero no readable dentro stores.js .
App.esbelta
<script> import { myStuff, myStuff2 } from './stores.js'; </script> <h1>This is {$myStuff.TEST}</h1> <h1>This is {myStuff2.TEST}</h1>tiendas.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);¿Por qué pasó esto?
El tutorial menciona brevemente que es posible que obtenga un undefiend , pero no explica mucho más allá de eso y los documentos no mencionan ese posible resultado al momento de escribir esto.
Captura de pantalla del ejemplo de la respuesta marcada:
La forma en que funcionan las tiendas en Svelte es que envuelven su valor en una clase que no tiene una forma directa de obtener el valor almacenado. Tendrías que suscribirte para obtenerlo. También hay un método get que hace lo mismo debajo del capó.
Entonces, en su código, esto imprimiría el valor. También imprimirá los nuevos valores a medida que cambie.
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);En los archivos .svelte, la notación $____ hace esta suscripción para que sea más conveniente usarla.
Puedes usar get :
En general, debe leer el valor de una tienda suscribiéndose a ella y usando el valor a medida que cambia con el tiempo. Ocasionalmente, es posible que necesite recuperar el valor de una tienda a la que no está suscrito. get le permite hacerlo.
Por ejemplo:
import { readable, get } from 'svelte/store'; console.log("TEST FROM STORE: " + get(myStuff).TEST);