Svelte Partager l'état entre les composants (pour les nuls)

Dès que vous voyez le nouveau $state dans Svelte 5, vous pourriez être tenté de faire ce qui suit :

// sharedState.svelte.js
export const searchState = $state(""); // This won't work!

<!-- App.svelte -->
<script>
import { searchState } from './sharedState.svelte.js'

function handleClick(){
    // This won't work!
    searchState = "bicycles";
}
</script

<button onclick={handleClick}>Search for bicycles</button>

Cela ne fonctionnera pas - et voici pourquoi :

Vous rencontrez la partie la plus compliquée de Svelte 5. Comment fonctionne la réactivité et comment le compilateur vous la cache.

Lorsque vous exportez une valeur unique comme un nombre ou une chaîne, il n'existe aucun mécanisme permettant à Svelte de maintenir sa réactivité, car JavaScript n'offre aucun moyen de suivre cela.

Un grand merci à Mat Simon qui m'a expliqué ça avec des mots simples ? Voici ce que j'ai appris :

Utilisez $state avec des objets et des tableaux, pas des chaînes !

Vous ne pouvez pas utiliser une chaîne directement, mais tous les objets (et tableaux) dans $state obtiennent toutes leurs valeurs automatiquement transmises par Svelte 5. Envelopper votre valeur de chaîne dans un objet fonctionne :

// sharedState.svelte.js
// ❌ export const searchState = $state("");
export const searchState = $state({ text : "" });

Cela s'est transformé en un objet d'état Svelte avec un getter et un setter pour .text. Vous pouvez choisir le nom de propriété de votre choix, ainsi que plusieurs propriétés.

Lorsque vous importez cet objet $state, et puis écrivez .text =, vous utilisez le setter Svelte pour mettre à jour l'état :

// App.svelte

import { searchState } from './sharedState.svelte.js'

function handleClick(){
    // uses the automatically created setter
    searchState.text = "bicycles";
}

<button onclick={handleClick}>Search for bicycles</button>

Démo simple (REPL)) : Partager $state entre les composants (simple)

Et Svelte est vraiment intelligent sur la façon de proxyer ces objets. C'est pourquoi : myList.push('foo') fonctionne également pour les tableaux, car Svelte a également proxy la méthode push.

// data.svelte.js
export const myList = $state([]);

Attention : ne réaffectez pas directement les objets/tableaux !

Lorsque vous utilisez un objet (y compris des tableaux), ce ne sont pas non plus des états eux-mêmes ! C'est important à comprendre.

Si vous faites cela, vous perdez en réactivité !

import { searchState } from './sharedState.svelte.js';
searchState = {text: "Hello world!"}; // don't do this!

Svelte n'a aucun moyen de gérer cela à votre place. Utilisez toujours le getter/setter automatique Svelte via searchState.text = 'new value'.

Avancé : utilisez SvelteSet, SvelteMap, SvelteDate, etc.

D'accord, les objets et les tableaux fonctionnent bien et sont gérés automatiquement par Svelte - nous l'avons compris.

Mais qu'en est-il
Date, URL et autres objets intégrés du JavaScript standard ? Et si vous êtes plus expérimenté en JavaScript, vous savez peut-être qu'il existe des types de données plus avancés (objets intégrés standard) :

• L'objet Set vous permet de stocker des valeurs uniques de tout type, qu'il s'agisse de valeurs primitives ou de références d'objet.

• L'objet Map contient des paires clé-valeur et se souvient de l'ordre d'insertion d'origine des clés.

Si vous souhaitez les utiliser avec $state réactif, vous devez utiliser leur wrapper Svelte correspondant de svelte/reactivity

• MédiaQuery
• SvelteDate
• SvelteMap
• SvelteSet
• SvelteURL
• SvelteURLSearchParams

// sharedState.svelte.js
export const searchState = $state(""); // This won't work!

La raison pour laquelle il existe une classe SvelteSet et SvelteMap distincte (au lieu de simplement la réécrire automatiquement comme ils le font avec les objets et les tableaux) est parce qu'ils voulaient tracer une ligne quelque part car ils ne peuvent pas proxy tous les objets imaginables. Voir https://github.com/sveltejs/svelte/issues/10263 pour les détails techniques.

Avancé : Utiliser les classes

Il existe plusieurs options pour définir vos objets d'état, vous pouvez également utiliser des classes pour les méthodes personnalisées : https://joyofcode.xyz/how-to-share-state-in-svelte-5#using-classes-for- état réactif

Partager l'état entre les composants ($state & $derived)

Nous savons donc comment importer (et mettre à jour) des états à l'intérieur des composants et nous savons que nous pouvons utiliser des objets et des tableaux prêts à l'emploi avec $state :

<!-- App.svelte -->
<script>
import { searchState } from './sharedState.svelte.js'

function handleClick(){
    // This won't work!
    searchState = "bicycles";
}
</script

<button onclick={handleClick}>Search for bicycles</button>

On peut même transmettre l'objet $state comme référence par une propriété avec $props :

// sharedState.svelte.js
// ❌ export const searchState = $state("");
export const searchState = $state({ text : "" });

// App.svelte

import { searchState } from './sharedState.svelte.js'

function handleClick(){
    // uses the automatically created setter
    searchState.text = "bicycles";
}

<button onclick={handleClick}>Search for bicycles</button>

Mais comment savoir que l'état a changé quelque part dans votre application lorsque vous êtes à l'intérieur d'un composant ? C'est à cela que servent $derived et $derived.by :

// data.svelte.js
export const myList = $state([]);

Démo simple (REPL)) : Partager $state entre les composants (simple)

Utilisation avec bind:value

Comme vous le savez peut-être déjà, il n'est pas nécessaire d'écrire des fonctions de gestionnaire pour les saisies de texte. Vous pouvez simplement utiliser bind:value={myStateObj} pour mettre à jour l'état automatiquement :

import { searchState } from './sharedState.svelte.js';
searchState = {text: "Hello world!"}; // don't do this!

Utilisation avec bind:group ?

Plusieurs entrées de cases à cocher peuvent également être gérées avec Svelte via bind-group={stateObj} - mais il y a toujours une discussion ouverte sur la façon de l'utiliser correctement avec $state.

La bonne nouvelle : il existe plusieurs façons de procéder, voir ci-dessous.

Démo avancée : rechercher et filtrer les données produit

Une solution consiste à utiliser l'événement onchange et mettez à jour l'état dans la fonction de gestionnaire.

Démo simple (REPL) : recherchez et filtrez avec les composants du groupe de cases à cocher et v5 $state & $derived

Exemple SvelteKit complet (WIP) : https://github.com/mandrasch/austrian-web-dev-companies

J'ai également lancé une discussion Reddit pour obtenir plus de commentaires :
Quel est le moyen le plus simple de cocher les cases de recherche et de filtrage avec Svelte v5 ($state) ?

Heureux de recevoir vos commentaires ici - ou ici en commentaire ! ?

Plus de ressources

• Différentes façons de partager l'état dans Svelte 5 - Joy of Code
• Construisons un système de filtrage avec Svelte 5, Sveltekit 2, Tailwind, Upstash (2024) - Lawal Adebola
• Svelte 5 - Global $state (convertir les magasins en runes $state) - Svelte Mastery

Un grand merci à Mat Simon !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!