Manejo de actualizaciones de estado en Svelte

Cómo usar asignaciones reactivas en Svelte para trabajar con actualizaciones de estado dentro de un componente

Una gran cosa sobre Svelte es que no necesita hacer nada especial para actualizar el estado de un componente.

Todo lo que necesitas es una tarea.

Di que tienes uncountvariable. Puede incrementar eso usando, simplemente,count = count + 1, ocount++:

<script>
let count = 0

const incrementCount = () => { count++ } </script>

{count} <button on:click={incrementCount}>+1</button>

Esto no es nada innovador si no está familiarizado con cómo los marcos web modernos manejan el estado, pero en React tendría que llamarthis.setState(), o use eluseState()gancho.

Vue adopta un enfoque más estructurado utilizando clases y eldatapropiedad.

Habiendo usado ambos, encuentro que Svelte es una sintaxis mucho más similar a JavaScript.

Debemos ser conscientes de una cosa, que se aprende con bastante rapidez: también debemos hacer una tarea al cambiar el valor.

Para valores simples como cadenas y números, eso es mayormente un hecho, porque todos los métodos en String devuelven nuevas cadenas, y lo mismo para los números: son inmutables.

¿Pero para matrices? No podemos usar métodos que alteren la matriz. Me gustapush(),pop(),shift(),splice()… Porque no hay asignación. Cambian la estructura de datos interna, pero Svelte no puede detectar eso.

Bueno tulataaún utilícelos, pero después de haber realizado su operación, reasigna la variable a sí misma, así:

let list = [1, 2, 3]
list.push(4)
list = list

Lo cual es un poco contrario a la intuición, pero lo recordará rápidamente.

O puede utilizar el operador de propagación para realizar operaciones:

let list = [1, 2, 3]
list = [...list, 4]

Descarga mi gratisManual Svelte


Tutoriales más esbeltos: