Im heutigen Artikel unserer Blogserie über Svelte widmen wir uns einem weiteren wesentlichen Aspekt der Entwicklung mit diesem Framework: den Stores. Svelte bietet ein flexibles und mächtiges Zustandsmanagement-System, das durch die Verwendung von Stores realisiert wird. Diese ermöglichen eine effiziente Verwaltung und Verteilung von Daten in Ihrer Anwendung.
Einführung in Stores
In Svelte sind Stores spezielle Objekte, die dazu verwendet werden, Zustände applikationsweit zu speichern und zu verwalten. Sie sind besonders nützlich, um Daten zwischen Komponenten zu teilen, die nicht direkt miteinander verknüpft sind.
Readable und Writable Stores
Svelte unterscheidet zwischen zwei Haupttypen von Stores: Readable und Writable Stores. Ein Readable Store erlaubt es Komponenten, auf Daten zu abonnieren, aber nicht direkt Änderungen daran vorzunehmen. Ein Writable Store hingegen ermöglicht sowohl das Lesen als auch das Schreiben von Daten.
<script>
import { writable } from 'svelte/store';
let count = writable(0);
function increment() {
count.update(n => n + 1);
}
</script>
<button on:click={increment}>
Klick mich: {$count}
</button>Subscription und Auto-subscription
Die Subscription erfolgt in Svelte typischerweise mittels des `$`-Präfixes, das vor den Store-Namen gesetzt wird. Dieses Konzept, bekannt als Auto-subscription, ermöglicht es Komponenten, sich automatisch auf Änderungen des Store-Wertes zu aktualisieren.
Derived und Custom Stores
Neben den grundlegenden Readable und Writable Stores bietet Svelte auch die Möglichkeit, Derived Stores und Custom Stores zu erstellen. Diese erweiterten Store-Typen bieten zusätzliche Flexibilität und Kontrolle über Ihre Daten.
Erstellen und Verwenden Derived Stores
Derived Stores leiten ihren Zustand von einem oder mehreren anderen Stores ab. Sie sind nützlich, um abgeleitete oder berechnete Werte zu verwalten, die von anderen Zuständen abhängen.
<script>
import { writable, derived } from 'svelte/store';
let price = writable(20);
let quantity = writable(1);
let total = derived([price, quantity], ([$price, $quantity]) => $price * $quantity);
</script>
<p>Total: {$total}</p>Erstellen und Verwenden benutzerdefinierter Stores
Custom Stores können erstellt werden, indem man die `writable`- oder `readable`-Funktion erweitert und eigene Funktionen oder Verhaltensweisen integriert. Dies ist ideal, wenn Sie spezifische Funktionalitäten benötigen, die über die Standardfunktionalität der Stores hinausgehen.
<script>
function customStore(initial) {
const { subscribe, set, update } = writable(initial);
return {
subscribe,
increment: () => update(n => n + 1),
reset: () => set(initial)
};
}
let count = customStore(0);
</script>
<button on:click={count.increment}>
Klick mich: {$count}
</button>
<button on:click={count.reset}>
Reset
</button>Zusammenfassung
Stores in Svelte bieten eine mächtige und flexible Möglichkeit, den Zustand innerhalb Ihrer Anwendungen zu verwalten. Sie ermöglichen nicht nur die einfache Weitergabe von Daten zwischen Komponenten, sondern auch die Implementierung von komplexen logischen Beziehungen und Berechnungen.
