Svelte 43: Auto-Suscripción — La Sintaxis $store en Profundidad
easy⏱ 5 mincoursesvelte
A qué compila realmente $count
Aproximadamente: el compilador inserta let $count; const unsub = count.subscribe(v => $count = v); cerca del inicio del componente, más un onDestroy(unsub). Cualquier asignación como $count++ se convierte en count.set($count + 1). Obtienes acceso reactivo, en vivo, con cero código repetitivo de suscribir/desuscribir manual.
// Roughly what the compiler generates for `$count`:
let $count;
const unsubscribe = count.subscribe((value) => {
$count = value;
});
onDestroy(unsubscribe);
// And `$count++` becomes:
count.set($count + 1);
$ solo existe donde mira el compilador: dentro de archivos .svelte
Un módulo .js/.ts plano — incluso uno importado por tu componente — es JavaScript ordinario para cualquier herramienta de la cadena. $count ahí es simplemente un ReferenceError esperando a ocurrir, porque nada compila ese archivo buscando el patrón $. Para leer el valor de un store desde JS plano, importa get de 'svelte/store' y llama get(count) — una foto instantánea puntual, no una suscripción en vivo.
// mathHelpers.js — a PLAIN module, never compiled by Svelte
import { get } from 'svelte/store';
// WRONG — this is not valid, $count means nothing here:
// export function doubleWrong() { return $count * 2; }
// CORRECT — get() takes a one-off snapshot:
export function doubleCount(store) {
return get(store) * 2;
}
get() toma una foto, no se suscribe
get(store) se suscribe, captura el valor actual, y se desuscribe de inmediato — perfecto para lecturas puntuales dentro de manejadores de eventos, inútil para mantener la UI sincronizada continuamente. Para UI que se actualiza continuamente, necesitas $store dentro de un archivo .svelte, o una llamada real a .subscribe() que se mantenga viva.