Compartir estado entre múltiples componentes es uno de los retos más comunes en el desarrollo frontend. Svelte resuelve este problema con una herramienta nativa llamada store, que permite crear valores reactivos accesibles desde cualquier parte de la aplicación y actualizarlos de forma sencilla. A continuación se explica paso a paso cómo implementar un store en Svelte para manejar un contador compartido.
¿Qué es un store en Svelte y por qué es útil?
Un store es un mecanismo de reactividad que Svelte ofrece de forma integrada. Su propósito principal es almacenar un valor que se repite en varios componentes y permitir que cualquier componente lo lea o lo actualice sin necesidad de pasar props manualmente por toda la jerarquía.
El módulo svelte/store expone métodos como readable y writable que facilitan la creación de estos valores compartidos. En el ejemplo de la clase se utiliza readable para importar la funcionalidad, aunque para actualizar el valor desde un componente se emplea el método .update(), propio de un store de tipo writable [01:30].
¿Cómo se crea y estructura el store?
La convención recomendada es crear una carpeta dedicada dentro de src llamada store y dentro colocar un archivo store.js. Esto mantiene la lógica de estado separada de los componentes visuales.
El archivo store.js luce así:
js
import { writable } from 'svelte/store';
export const count = writable(0);
- Se importa
writable desde svelte/store.
- Se exporta una constante
count inicializada en cero.
- Cualquier componente que importe
count tendrá acceso al mismo valor reactivo.
Esa simplicidad es una de las ventajas más valoradas de Svelte frente a otras librerías que requieren configuraciones más extensas para manejar estado global.
¿Cómo se consume y actualiza el store desde un componente?
Importar el store en el componente
Dentro del nuevo componente buttonCount.svelte, se importa count utilizando una ruta relativa que sale de la carpeta components hacia store/store.js [03:10]:
js
import { count } from '../store/store.js';
Usar el prefijo $ para reactividad automática
Svelte ofrece el símbolo de pesos ($) como prefijo para acceder al valor reactivo de un store directamente en el markup o en la lógica del script. En lugar de suscribirse manualmente, basta con escribir $count y Svelte se encarga de la suscripción y desuscripción de forma automática [03:55].
En el botón se aplica una operación ternaria para mostrar el valor:
svelte
{$count === 0 ? '' : $count}
Si el contador es cero, muestra un string vacío; de lo contrario, muestra el número actual.
Actualizar el valor con .update()
Para incrementar el contador se crea una función handleClick que utiliza el método .update() del store [04:40]:
js
function handleClick() {
count.update(n => n + 1);
}
n representa el valor actual del store.- Se retorna
n + 1, incrementando el contador en cada clic.
- El evento
on:click del botón invoca esta función.
¿Cómo dar estilos al componente para diferenciarlo?
Dentro de la etiqueta <style> del componente se aplican estilos encapsulados, es decir, solo afectan al botón de ese componente sin colisionar con otros [05:30]:
css
button {
background-color: orange;
color: white;
border: none;
border-radius: 4px;
padding: 0.5rem;
text-transform: uppercase;
cursor: pointer;
}
El color naranja hace referencia a la identidad visual de Svelte, y text-transform: uppercase facilita la identificación rápida del botón en la interfaz.
Integrar el componente en la aplicación
Finalmente, en App.svelte se importa el nuevo componente y se coloca en el markup [06:20]:
svelte
<script>
import ButtonCount from './components/buttonCount.svelte';
</script>
<ButtonCount />
Un detalle importante mencionado durante la implementación: los errores tipográficos (typos) en los nombres de archivo o de importación son una causa frecuente de fallos de compilación. Verificar que el nombre del archivo coincida exactamente con el nombre usado en el import evita errores silenciosos [07:05].
Con esta implementación queda listo un contador compartido que cualquier componente puede leer y modificar a través del store. Este patrón será la base para la aplicación Bookstagram que se construirá a lo largo del curso. Si ya probaste el store en tu proyecto, comparte qué otros casos de uso se te ocurren para aprovechar esta reactividad global.
