javascript / intermediate
Snippet
Reaktive Datentransformation mit Derived Stores
Abgeleitete Stores (Derived Stores) erstellen einen neuen reaktiven Wert basierend auf einem oder mehreren bestehenden Stores. Dies hält die Zustandslogik gekapselt und stellt sicher, dass Berechnungen automatisch synchronisiert bleiben.
snippet.js
1
2
3
4
5
6
7
8
9
10
import { writable, derived } from 'svelte/store';export const user = writable({ name: 'Lukas', points: 150 });export const userLevel = derived(user, ($user) => {if ($user.points > 100) return 'Gold';return 'Silver';});// Usage: $userLevel will update automatically when user changes
svelte
Erklärung
1
export const userLevel = derived(user, ($user) => {
Erstellt einen neuen Store, der vom 'user'-Store abhängt und dessen aktuellen Wert als Argument übernimmt.
2
return 'Gold';
Die Logik innerhalb des Callbacks bestimmt den Wert des abgeleiteten Stores.
3
// Usage: $userLevel
Auf den abgeleiteten Store wird mit dem $-Präfix zugegriffen, um automatische reaktive Updates zu erhalten.