Cum să construiți o aplicație Vue To-Do cu LocalStorage

LocalStorage este un API web, încorporat în browsere, care permite aplicațiilor web să stocheze perechi cheie-valoare pe dispozitivul dvs. local. Oferă o metodă simplă de stocare a datelor, chiar și după ce închideți browserul.

Puteți integra LocalStorage cu aplicațiile dvs. Vue pentru a stoca liste și alte date de dimensiuni mici. Acest lucru vă permite să păstrați datele utilizatorului în diferite sesiuni de aplicație.

După acest tutorial, veți avea o aplicație funcțională Vue to-do care poate adăuga și elimina sarcini, stochând datele folosind LocalStorage.

Configurarea aplicației Vue To-Do

Înainte de a începe codarea, asigurați-vă că aveți instalat Node și NPM pe dispozitivul dvs.

Pentru a crea un nou proiect, rulați această comandă npm:

npm create vue 

Comanda va trebui să selectați o presetare pentru noua aplicație Vue înainte de a crea și instala dependențele necesare.

Nu veți avea nevoie de funcții suplimentare pentru această aplicație de făcut, așa că alegeți „Nu” pentru toate presetările disponibile.

Cu proiectul configurat, puteți începe să construiți aplicația de rezolvat cu LocalStorage.

Crearea aplicației To-Do

Pentru acest tutorial, veți crea două componente Vue: App.vue pentru structura generală și Todo.vue pentru a afișa o listă de sarcini.

Crearea componentei To-Do

Pentru componenta Todo, creați un fișier nou, src/components/Todo.vue. Acest fișier se va ocupa de structura listei de sarcini.

Lipiți următorul cod în Todo.vue fişier:

<scriptsetup>
const props = defineProps(['todos']);
const emit = defineEmits(['remove-todo']);
const removeTodo = (index) => {
 emit('remove-todo', index);
};
script>
<template>
<divclass="todo-list">
<ul>
<liv-for="(todo, index) in props.todos":key="index"class="todo-item">
 {{ todo.text }}
<button @click="removeTodo(index)"class="remove-button">
 Remove
button>
li>
ul>
div>
template>

Fragmentul de cod de mai sus detaliază structura A face componentă. Setează componenta să primească date și să emită evenimente prin utilizarea elementelor de recuzită și, respectiv, evenimente personalizate.

Pentru a explica mai departe, codul folosește Recuzită Vue pentru comunicarea între componente a primi pe toate matrice din componenta părinte, App.vue. Apoi folosește directiva v-for pentru randarea listelor pentru a itera prin matricea todos primită.

Codul emite, de asemenea, un eveniment personalizat, elimina-todo, cu o sarcină utilă index. Acest lucru vă permite să eliminați o anumită sarcină cu un index specific din matricea todos.

Făcând clic pe Elimina butonul, fragmentul declanșează emisia evenimentului personalizat către componenta părinte. Aceasta indică faptul că ați făcut clic pe butonul, solicitând executarea funcției corespunzătoare definite în componenta părinte, App.vue.

Crearea componentei de vizualizare a aplicației

Du-te la App.vue pentru a continua construirea aplicației Todo. The App componenta se va ocupa de adăugarea de noi sarcini și de redare A face componentă.

Lipiți următoarele scenariu blocați în fișierul dvs. App.vue:

<scriptsetup>
import Todo from "./components/Todo.Vue";
import { ref } from "vue";
const newTodo = ref("");
const todos = ref([]);
const addTodo = () => {
 if (newTodo.value.trim() "") return;
 todos.value.push({ text: newTodo.value });
 newTodo.value = "";
 saveToLocalStorage();
};
const removeTodo = (key) => {
 todos.value.splice(key, 1);
 saveToLocalStorage();
};
const saveToLocalStorage = () => {
 localStorage.setItem("todos", JSON.stringify(todos.value));
};
const savedTodos = localStorage.getItem("todos");
if (savedTodos) {
 todos.value.push(...JSON.parse(savedTodos));
}
script>

Fragmentul de cod de mai sus subliniază logica App.vue componentă. Fragmentul importă A face componentă și inițializează variabilele reactive cu API-ul Vue Composition.

Codul începe cu importul componentei Todo și al ref funcția din calea specificată și vue, respectiv.

Fragmentul inițializează apoi un șir reactiv, nouTodo, pentru a stoca sarcina pe care o veți introduce. De asemenea, inițializează un reactiv gol toate matrice, deținând lista sarcinilor.

The addTodo funcția adaugă sarcini noi la matricea todos. Dacă newTodo nu este gol, este introdus în matrice la confirmare și resetează valoarea newTodo pentru a vă permite să adăugați mai multe sarcini.

Funcția addTodo invocă și funcția saveToLocalStorage, care salvează matricea todos în LocalStorage al browserului. Fragmentul folosește setItem metoda pentru a realiza acest lucru și convertește matricea todos într-un șir JSON înainte de stocare.

De asemenea, definește a removeTodo functie care ia a cheie ca parametru. Folosește această cheie pentru a elimina cea corespunzătoare a face din matricea todos. După eliminare, funcția removeTodo apelează saveToLocalStorage pentru a actualiza datele LocalStorage.

În cele din urmă, codul folosește getItem metodă disponibilă pentru LocalStorage pentru a prelua sarcinile salvate anterior cu tasta todos. Dacă ați salvat sarcini în LocalStorage al browserului, codul le împinge în matricea todos.

Acum v-ați ocupat de logica componentei App.vue, inserați următorul cod în fișierul șablon bloc al aplicației tale Vue pentru a crea interfața cu utilizatorul:

<template>
<divclass="app">
<h1>To do Listh1>
<divclass="add-todo">
<inputv-model="newTodo" @keyup.enter="addTodo"
 placeholder="Add a new task" class="todo-input" />
<button @click="addTodo"class="add-button">Addbutton>
div>
<Todo:todos="todos" @remove-todo="removeTodo" />
div>
template>

Șablonul folosește v-model, o metodă de legare a datelor în Vue pentru a lega todo introdus la nouTodo șir reactiv. Șablonul folosește și v-ondirectivă pentru gestionarea evenimentelor în Vue prin stenografia sa (@).

Folosește v-on pentru a asculta atât clic și introduce evenimente cheie pentru a confirma noulTodo.

În cele din urmă, șablonul folosește A face componentă pe care ați creat-o mai întâi pentru a reda lista cu toate. The :todos sintaxa trece toate matrice ca suport pentru componenta Todo.

The @remove-todo sintaxa setează un ascultător de evenimente pentru a captura evenimentul personalizat emis de componenta Todo și pentru a apela removeTodo funcţionează ca răspuns.

Acum ați finalizat aplicația, puteți alege să o stilați după gustul dvs. Vă puteți previzualiza aplicația rulând această comandă:

npm run dev

Ar trebui să vedeți un ecran ca acesta:

Puteți adăuga sau elimina sarcini în cadrul aplicației Todo. În plus, datorită integrării LocalStorage, puteți reîmprospăta aplicația sau puteți ieși din ea complet; lista dvs. de lucruri de făcut va rămâne intactă.

Importanța stocării locale

Integrarea LocalStorage în aplicațiile web este esențială atât pentru dezvoltatorii începători, cât și pentru cei experimentați. LocalStorage îi prezintă pe începători în persistența datelor, permițându-le să stocheze și să recupereze conținutul generat de utilizatori.

LocalStorage este important, deoarece vă puteți asigura că datele utilizatorului rămân intacte în diferite sesiuni. LocalStorage elimină necesitatea comunicării constante cu serverul, ceea ce duce la timpi de încărcare mai rapizi și la o capacitate de răspuns îmbunătățită în aplicațiile web.