Svelte Share-Status zwischen Komponenten (für Dummies)

Sobald Sie den neuen $state in Svelte 5 sehen, könnten Sie versucht sein, Folgendes zu tun:

// 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>

Das wird nicht funktionieren – und hier ist der Grund:

Sie stoßen auf den kompliziertesten Teil von Svelte 5: Wie Reaktivität funktioniert und wie der Compiler sie vor Ihnen verbirgt.

Wenn Sie einen einzelnen Wert wie eine Zahl oder einen String exportieren, gibt es für Svelte keinen Mechanismus, um die Reaktivität aufrechtzuerhalten, da JavaScript keine Möglichkeit bietet, dies zu verfolgen.

Vielen Dank an Mat Simon, der mir das in einfachen Worten erklärt hat? Folgendes habe ich gelernt:

Verwenden Sie $state mit Objekten und Arrays, nicht mit Strings!

Sie können einen String nicht direkt verwenden, aber alle Objekte (und Arrays) in $state erhalten alle ihre Werte automatisch von Svelte 5 als Proxy. Das Einschließen Ihres String-Werts in ein Objekt funktioniert:

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

Dies wurde zu einem Svelte-Statusobjekt mit einem Getter und einem Setter für .text. Sie können einen beliebigen Eigenschaftsnamen sowie mehrere Eigenschaften auswählen.

Wenn Sie dieses $state-Objekt importieren und dann .text = schreiben, verwenden Sie den Svelte-Setter, um den Status zu aktualisieren:

// 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>

Einfache Demo (REPL)): $state zwischen Komponenten teilen (einfach)

Und Svelte ist wirklich clever darin, diese Objekte als Proxy zu verwenden. Deshalb: myList.push('foo') funktioniert auch für Arrays, da Svelte auch die Push-Methode als Proxy verwendet hat.

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

Achtung: Objekte/Arrays nicht direkt neu zuweisen!

Wenn Sie ein Objekt (einschließlich Arrays) verwenden, sind diese selbst auch keine Zustände! Das ist wichtig zu verstehen.

Wenn Sie dies tun, verlieren Sie die Reaktionsfähigkeit!

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

Svelte kann das nicht für Sie erledigen. Verwenden Sie immer den automatischen Svelte-Getter/Setter über searchState.text = 'new value'.

Erweitert: Verwenden Sie SvelteSet, SvelteMap, SvelteDate usw.

Okay, Objekte und Arrays sind in Ordnung und werden von Svelte automatisch verarbeitet – wir haben es verstanden.

Aber was ist mit
Datum, URL und weitere integrierte Objekte von Standard-JavaScript? Und wenn Sie mehr Erfahrung mit JavaScript haben, wissen Sie vielleicht, dass es einige erweiterte Datentypen (standardmäßige integrierte Objekte) gibt:

• Mit dem Set-Objekt können Sie eindeutige Werte jeglicher Art speichern, unabhängig davon, ob es sich um Grundwerte oder Objektreferenzen handelt.

• Das Map-Objekt enthält Schlüssel-Wert-Paare und merkt sich die ursprüngliche Einfügereihenfolge der Schlüssel.

Wenn Sie diese mit reaktivem $state verwenden möchten, müssen Sie den entsprechenden Svelte-Wrapper von svelte/reactivity verwenden

• MediaQuery
• SvelteDate
• SvelteMap
• SvelteSet
• SvelteURL
• SvelteURLSearchParams

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

Der Grund dafür, dass es eine separate SvelteSet- und SvelteMap-Klasse gibt (anstatt sie einfach automatisch neu zu schreiben, wie sie es bei Objekten und Arrays tun), liegt darin, dass sie irgendwo eine Linie ziehen wollten, da sie nicht jedes erdenkliche Objekt vertreten können. Technische Details finden Sie unter https://github.com/sveltejs/svelte/issues/10263.

Fortgeschritten: Klassen verwenden

Es gibt mehrere Optionen zum Definieren Ihrer Statusobjekte. Sie können auch Klassen für benutzerdefinierte Methoden verwenden: https://joyofcode.xyz/how-to-share-state-in-svelte-5#using-classes-for- reaktiver Zustand

Status zwischen Komponenten teilen ($state & $derived)

Wir wissen also, wie man Zustände innerhalb von Komponenten importiert (und aktualisiert) und wir wissen, dass wir Objekte und Arrays sofort mit $state:
verwenden können

<!-- 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>

Wir können das $state-Objekt sogar als Referenz durch eine Eigenschaft mit $props:
weitergeben

// 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>

Aber woher wissen Sie, dass sich der Status irgendwo in Ihrer App geändert hat, wenn Sie sich in einer Komponente befinden? Dafür sind $derived und $derived.by da:

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

Einfache Demo (REPL)): $state zwischen Komponenten teilen (einfach)

Verwendung mit bind:value

Wie Sie vielleicht bereits wissen, besteht keine Notwendigkeit, Handlerfunktionen für Texteingaben zu schreiben. Sie können einfach bind:value={myStateObj} verwenden, um den Status automatisch zu aktualisieren:

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

Verwendung mit bind:group?

Mehrere Checkbox-Eingaben können auch mit Svelte über bind-group={stateObj} verarbeitet werden – es gibt jedoch immer noch eine offene Diskussion darüber, wie man es mit $state richtig verwendet.

Die gute Nachricht: Es gibt mehrere Möglichkeiten, dies zu tun, siehe unten.

Erweiterte Demo: Produktdaten suchen und filtern

Eine Möglichkeit besteht darin, das onchange-Ereignis und aktualisieren Sie den Status innerhalb der Handlerfunktion.

Einfache Demo (REPL): Suchen und Filtern mit Kontrollkästchengruppenkomponenten und v5 $state & $derived

Vollständiges SvelteKit-Beispiel (WIP): https://github.com/mandrasch/austrian-web-dev-companies

Ich habe auch eine Reddit-Diskussion gestartet, um mehr Feedback zu erhalten:
Was ist der einfachste Weg zum Suchen und Filtern von Kontrollkästchen mit Svelte v5 ($state)?

Ich freue mich über Ihr Feedback dort – oder hier als Kommentar! ?

Mehr Ressourcen

• Verschiedene Möglichkeiten, den Status in Svelte 5 – Joy of Code zu teilen
• Lassen Sie uns ein Filtersystem mit Svelte 5, Sveltekit 2, Tailwind, Upstash (2024) – Lawal Adebola erstellen
• Svelte 5 – Globaler $state (Geschäfte in $state-Runen umwandeln) – Svelte-Meisterschaft

Vielen Dank an Mat Simon!

Das obige ist der detaillierte Inhalt vonSvelte Share-Status zwischen Komponenten (für Dummies). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!