javascript / expert
Snippet
Reaktiver Zustandsverlauf via Snapshots
Um eine Undo/Redo-Logik in Svelte 5 zu implementieren, müssen Sie den aktuellen Wert eines Proxy-basierten $state erfassen. Das Utility $state.snapshot wandelt einen reaktiven Proxy zurück in ein einfaches JavaScript-Objekt um, sodass es sicher in einem Array gespeichert werden kann, ohne mit zukünftigen Mutationen verknüpft zu bleiben.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
let data = $state({ x: 0, y: 0 });let history = $state([]);function saveStep() {const snapshot = $state.snapshot(data);history.push(structuredClone(snapshot));}function undo() {if (history.length > 0) data = history.pop();}
svelte
Erklärung
1
$state.snapshot(data)
Entfernt den reaktiven Proxy-Wrapper, um eine statische Version der Daten zu erhalten.
2
data = history.pop()
Die Neuzuweisung der Zustandsvariable löst ein UI-Update mit dem vorherigen Snapshot aus.