Gestion des mises à jour d'état dans Svelte

Comment utiliser les affectations réactives dans Svelte pour travailler avec les mises à jour d'état dans un composant

Une grande chose à propos de Svelte est que vous n'avez rien de spécial à faire pour mettre à jour l'état d'un composant.

Tout ce dont vous avez besoin est une mission.

Dites que vous avez uncountvariable. Vous pouvez incrémenter cela en utilisant, simplement,count = count + 1, oucount++:

<script>
let count = 0

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

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

Cela n'a rien de révolutionnaire si vous n'êtes pas familier avec la façon dont les frameworks Web modernes gèrent l'état, mais dans React, vous devrez soit appelerthis.setState(), ou utilisez leuseState()accrocher.

Vue adopte une approche plus structurée en utilisant des classes et ledatabiens.

Ayant utilisé les deux, je trouve que Svelte est une syntaxe beaucoup plus semblable à JavaScript.

Nous devons être conscients d'une chose, qui s'apprend assez rapidement: nous devons également faire une tâche lors de la modification de la valeur.

Pour les valeurs simples comme les chaînes et les nombres, c'est surtout une donnée, car toutes les méthodes de String renvoient de nouvelles chaînes, et il en va de même pour les nombres - elles sont immuables.

Mais pour les tableaux? Nous ne pouvons pas utiliser de méthodes qui modifient le tableau. Aimerpush(),pop(),shift(),splice()… Parce qu'il n'y a pas de mission. Ils modifient la structure de données interne, mais Svelte ne peut pas le détecter.

Bien toipeututilisez-les toujours, mais après avoir effectué votre opération, vous réaffectez la variable à elle-même, comme ceci:

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

Ce qui est un peu contre-intuitif, mais vous vous en souviendrez rapidement.

Ou vous pouvez utiliser l'opérateur de diffusion pour effectuer des opérations:

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

Téléchargez mon gratuitManuel de Svelte


Plus de tutoriels sveltes: