Annullamento e ripristino con la cronologia dello store
Crei uno stack della cronologia attorno a uno store writable per supportare annullamento e ripristino.
Annullamento e ripristino con la cronologia dello store è una lezione Sveltejs Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Sveltejs Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Sveltejs Academy include 4 lezioni in totale.
Stack della cronologia
Avvolga uno store writable con array past/present/future per supportare annulla/ripristina.
Implementazione di base
Mantenga un elenco degli stati precedenti.
function createHistory(initial) {
let past = [], future = [];
const state = writable(initial);
return {
subscribe: state.subscribe,
set(v) { past.push(get(state)); future = []; state.set(v); },
undo() { if (past.length) { future.push(get(state)); state.set(past.pop()); } },
redo() { if (future.length) { past.push(get(state)); state.set(future.pop()); } }
};
}Limitare le dimensioni dello stack
Limiti la lunghezza della cronologia per contenere l'uso della memoria.
Copie profonde
Inserisca copie profonde degli oggetti per evitare problemi di mutazione.
Scorciatoie da tastiera
Associ Ctrl+Z e Ctrl+Shift+Z alle operazioni annulla/ripristina per un'esperienza nativa.
Persistenza della cronologia
Salvi i dati in localStorage per supportare annulla/ripristina tra sessioni, prestando attenzione alle dimensioni.
Prestazioni
Per gli stati di grandi dimensioni, memorizzi le differenze invece degli snapshot completi.
Ramificazione
La maggior parte delle app cancella il futuro dopo una nuova azione; alcuni editor mantengono una cronologia ramificata.
Opzioni delle librerie
Librerie come svelte-undo forniscono store della cronologia pronti all'uso.
Indicazioni nell'interfaccia
Disabiliti i pulsanti annulla/ripristina quando non c'è nulla da annullare o ripristinare.
Test
Testi sequenze di azioni + annulla/ripristina per assicurarsi che il ripristino sia corretto.
Verifica rapida
A cosa serve lo stack future?
Riepilogo
Implementi annulla/ripristina con gli stack past/present/future attorno a uno store writable. Ne limiti le dimensioni e associ le scorciatoie.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 41
- Lezioni
- 163
Domande Frequenti
La lezione «Annullamento e ripristino con la cronologia dello store» è gratuita?
Sì — il testo completo di «Annullamento e ripristino con la cronologia dello store» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Sveltejs Academy, passa a CoddyKit PRO. Il corso Sveltejs Academy include 4 lezioni in totale.
Cosa imparerò in «Annullamento e ripristino con la cronologia dello store»?
Crei uno stack della cronologia attorno a uno store writable per supportare annullamento e ripristino. Eserciti Sveltejs Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Sveltejs Academy?
Non è richiesta alcuna esperienza precedente. Sveltejs Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Annullamento e ripristino con la cronologia dello store»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Sveltejs Academy?
Sì. Ogni lezione Sveltejs Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Architettura degli store: moduli delle funzionalità
- Pattern Event Bus con gli store
- Aggiornamenti ottimistici dell'interfaccia
- Annullamento e ripristino con la cronologia dello store