Gestión de estados entre componentes en Svelte

Cómo trabajar con Props, la API de contexto y las tiendas en Svelte para pasar el estado entre los componentes de su aplicación

Svelte hace que manejar el estado de un solo componente sea muy fácil.

Pero ¿cómo pasamos el estado entre los componentes?

Pasar el estado mediante el uso de accesorios

La primera estrategia es común a otros marcos de UI y consiste en pasar el estado mediante propiedades, elevando el estado .

Cuando un componente necesita compartir datos con otro, el estado se puede mover hacia arriba en el árbol de componentes hasta que haya un componente principal común para esos componentes.

El estado debe transmitirse hasta que llegue a todos los componentes que necesitan esta información de estado.

Esto se hace usando accesorios , y es una técnica que creo que es la mejor porque es sencilla.

Consulta el tutorial de Svelte Props para obtener más información sobre los accesorios.

La API de contexto

Hay casos en los que las propiedades no son prácticas. Tal vez dos componentes estén tan distantes en el árbol de componentes que tendríamos que mover el estado al componente de nivel superior.

En este caso, se puede utilizar otra técnica llamada context API , y es ideal cuando quieres permitir que varios componentes se comuniquen con descendientes, pero no quieres pasar accesorios entre ellos.

La API de contexto es proporcionada por 2 funciones que proporciona el sveltepaquete: getContexty setContext.

Establece un objeto en el contexto, asociándolo a una clave:

scriptimport { setContext } from 'svelte'const someObject = {}setContext('someKey', someObject)/script

En otro componente puedes usar getContext para recuperar el objeto asignado a una clave:

scriptimport { getContext } from 'svelte'const someObject = getContext('someKey')/script

Solo puedes usarlo getContextpara recuperar una clave en el componente que la utilizó setContexto en uno de sus descendientes.

Si desea permitir que dos componentes que viven en dos árboles de componentes diferentes se comuniquen, existe otra herramienta para nosotros: stores .

Uso de las tiendas Svelte

Las tiendas Svelte son una gran herramienta para manejar el estado de su aplicación cuando los componentes necesitan comunicarse entre sí sin pasar demasiados accesorios.

Primero debes importar writabledesde svelte/store:

import { writable } from 'svelte/store'

y crea una variable de tienda usando la writable()función, pasando el valor predeterminado como primer argumento:

const username = writable('Guest')

Esto se puede colocar en un archivo separado, que puede importar en múltiples componentes, por ejemplo llamado store.js(no es un componente, por lo que puede estar en un .jsarchivo en lugar de .svelte:

import { writable } from 'svelte/store'export const username = writable('Guest')

Cualquier otro componente que ahora cargue este archivo puede acceder a la tienda:

scriptimport { username } from './store.js'/script

Ahora el valor de esta variable se puede establecer en un nuevo valor usando set(), pasando el nuevo valor como primer argumento:

username.set('new username')

Y se puede actualizar usando la update()función, que se diferencia set()porque no solo le pasa el nuevo valor, sino que ejecuta una función de devolución de llamada a la que se le pasa el valor actual como argumento:

const newUsername = 'new username!'username.update(existing = newUsername)

Puedes agregar más lógica aquí:

username.update(existing = { console.log(`Updating username from ${existing} to ${newUsername}`) return newUsername})

Para obtener el valor de la variable de tienda una vez , puede utilizar la get()función exportada por svelte/store:Te recomendamos 🍌 Películas Porno en Español, Estrenos, Inglés, Parodias, Hentai XXX Online Gratis

import { readable, get } from 'svelte/store'export const username = writable('Guest')get(username) //'Guest'

Para crear una variable reactiva que se actualice cada vez que cambie, puedes anteponer la variable de almacenamiento usando $, en este ejemplo $username. Al usar esto, el componente se volverá a renderizar cada vez que cambie el valor almacenado.

Svelte considera $que es un valor reservado y evitará que lo use para cosas que no estén relacionadas con los valores almacenados (y que podrían generar confusión), por lo que si está acostumbrado a anteponer referencias DOM usando $, no lo haga en Svelte.

Otra opción, más adecuada si necesitas ejecutar alguna lógica cuando la variable cambia, es utilizar el subscribe()método de username:

username.subscribe(newValue = {console.log(newValue)})

Además de las tiendas escribibles, Svelte proporciona dos tipos especiales de tiendas: tiendas legibles y tiendas derivadas .

Tiendas de lectura fácil y esbelta

Los almacenes legibles son especiales porque no se pueden actualizar desde el exterior (no existe ningún método set()or update()). En cambio, una vez que se establece el estado inicial, no se pueden modificar desde el exterior.

Los documentos oficiales de Svelte muestran un ejemplo interesante en el que se utiliza un temporizador para actualizar una fecha. Se me ocurre configurar un temporizador para obtener recursos de la red, realizar una llamada a la API, obtener datos del sistema de archivos (utilizando un servidor Node.js local) o cualquier otra cosa que se pueda configurar de forma autónoma.

En este caso, en lugar de utilizar writable()para inicializar la variable de tienda, utilizamos readable():

import { readable } from 'svelte/store'export const count = readable(0)

Puedes proporcionar una función después del valor predeterminado, que será la encargada de actualizarlo. Esta función recibe la setfunción para modificar el valor:

scriptimport { readable } from 'svelte/store'export const count = readable(0, set = { setTimeout(() = { set(1) }, 1000)})/script

En este caso, actualizamos el valor de 0 a 1 después de 1 segundo.

También puedes configurar un intervalo en esta función:

import { readable, get } from 'svelte/store'export const count = readable(0, set = { setInterval(() = { set(get(count) + 1) }, 1000)})

Puedes usar esto en otro componente como este:

scriptimport { count } from './store.js'/script{$count}

Tiendas derivadas de Svelte

Una tienda derivada le permite crear un nuevo valor de tienda que depende del valor de una tienda existente.

Puede hacerlo utilizando la derived()función exportada por svelte/store, que toma como primer parámetro el valor de la tienda existente, y como segundo parámetro una función, que recibe ese valor de la tienda como su primer parámetro:

import { writable, derived } from 'svelte/store'export const username = writable('Guest')export const welcomeMessage = derived(username, $username = { return `Welcome ${$username}`})

scriptimport { username, welcomeMessage } from './store.js'/script{$username}{$welcomeMessage}

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

Gestión de estados entre componentes en Svelte

Cómo trabajar con Props, la API de contexto y las tiendas en Svelte para pasar el estado entre los componentes de su aplicación

programar

es

2025-01-22

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente