Sådan bygger du en Vue To-Do-app med LocalStorage

LocalStorage er en web-API, indbygget i browsere, som lader webapplikationer gemme nøgleværdi-par på din lokale enhed. Det giver en enkel metode til at gemme data, selv efter du har lukket din browser.

Du kan integrere LocalStorage med dine Vue-apps for at gemme lister og andre små data. Dette giver dig mulighed for at vedligeholde brugerdata på tværs af forskellige app-sessioner.

Efter dette selvstudium har du en funktionel Vue to-do-app, der kan tilføje og fjerne opgaver og gemme dataene ved hjælp af LocalStorage.

Opsætning af Vue To-Do-applikationen

Før du begynder at kode, skal du sørge for, at du har installeret Node og NPM på din enhed.

For at oprette et nyt projekt skal du køre denne npm-kommando:

npm create vue 

Kommandoen kræver, at du vælger en forudindstilling til din nye Vue-applikation, før du opretter og installerer de nødvendige afhængigheder.

Du behøver ikke ekstra funktioner til denne opgave-app, så vælg "Nej" for alle de tilgængelige forudindstillinger.

Med projektet sat op, kan du begynde at bygge to-do-applikationen med LocalStorage.

Oprettelse af To-Do-applikationen

Til denne øvelse skal du oprette to Vue-komponenter: App.vue for den overordnede struktur og Todo.vue for at vise en liste over opgaver.

Oprettelse af To-Do-komponenten

For Todo-komponenten skal du oprette en ny fil, src/components/Todo.vue. Denne fil vil håndtere strukturen af ​​listen over opgaver.

Indsæt følgende kode i Todo.vue fil:

<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>

Ovenstående kodestykke beskriver strukturen af At gøre komponent. Det sætter komponenten op til at modtage data og udsende hændelser gennem brug af henholdsvis rekvisitter og tilpassede hændelser.

For at forklare yderligere, anvender koden Vue rekvisitter til kommunikation mellem komponenter at modtage todos array fra sin overordnede komponent, App.vue. Den bruger så v-for direktiv til gengivelse af lister at iterere gennem det modtagne todos-array.

Koden udsender også en tilpasset hændelse, fjerne-todo, med en nyttelast indeks. Dette giver dig mulighed for at fjerne en bestemt opgave med et specifikt indeks i todos-arrayet.

Ved at klikke på Fjerne knappen, udløser kodestykket udsendelsen af ​​den tilpassede hændelse til den overordnede komponent. Dette indikerer, at du har klikket på knappen, hvilket beder om udførelse af den tilsvarende funktion, der er defineret i den overordnede komponent, App.vue.

Oprettelse af applikationens visningskomponent

Gå over til App.vue for at fortsætte med at bygge Todo-applikationen. Det App komponent vil håndtere tilføjelse af nye opgaver og gengivelse af At gøre komponent.

Indsæt følgende manuskript blokere i din App.vue-fil:

<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>

Ovenstående kodestykke skitserer logikken i App.vue komponent. Uddraget importerer At gøre komponent og initialiserer reaktive variabler med Vue Composition API.

Koden begynder med importen af ​​Todo-komponenten og ref funktion fra den angivne sti og vue, henholdsvis.

Uddraget initialiserer derefter en reaktiv streng, newTodo, for at gemme den opgave, du skal indtaste. Den initialiserer også en tom reaktiv todos array, der holder listen over opgaver.

Det addTodo funktion tilføjer nye opgaver til todos-arrayet. Hvis newTodo ikke er tom, skubbes det ind i arrayet ved bekræftelse og nulstiller newTodo-værdien, så du kan tilføje flere opgaver.

AddTodo-funktionen aktiverer også saveToLocalStorage, som gemmer todos-arrayet i browserens LocalStorage. Uddraget bruger sætItem metode til at opnå dette og konverterer todos-arrayet til en JSON-streng før lagring.

Det definerer også en fjerne Todo funktion, der tager en nøgle som en parameter. Den bruger denne tast til at fjerne den tilsvarende at gøre fra todos-arrayet. Efter fjernelse kalder removeTodo-funktionen saveToLocalStorage for at opdatere LocalStorage-dataene.

Endelig bruger koden getItem metode tilgængelig for LocalStorage til at hente tidligere gemte opgaver med todos-nøglen. Hvis du har gemt opgaver i browserens LocalStorage, skubber koden dem ind i todos-arrayet.

Nu du har håndteret logikken i App.vue-komponenten, indsæt følgende kode i skabelon blok af din Vue-app for at oprette brugergrænsefladen:

<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>

Skabelonen bruger v-model, en metode til at binde data i Vue at binde den indtastede opgave til newTodo reaktiv streng. Skabelonen bruger også v-pådirektiv for håndtering af begivenheder i Vue gennem sin stenografi (@).

Den bruger v-on til at lytte til både klik og gå ind nøglebegivenheder for at bekræfte den nye Todo.

Endelig bruger skabelonen At gøre komponent, du oprettede først for at gengive listen over gøremål. Det :todos syntaks passerer todos array som en støtte til Todo-komponenten.

Det @fjern-todo syntaks opsætter en hændelseslytter til at fange den brugerdefinerede hændelse, som Todo-komponenten udsendte og kalder fjerne Todo fungere som svar.

Nu du har gennemført ansøgningen, kan du vælge at style den efter din smag. Du kan forhåndsvise din applikation ved at køre denne kommando:

npm run dev

Du bør se en skærm som denne:

Du kan tilføje eller fjerne opgaver i Todo-applikationen. Hvad mere er, takket være integrationen af ​​LocalStorage kan du opdatere programmet eller afslutte det helt; din udvalgte huskeliste vil forblive intakt.

Betydningen af ​​LocalStorage

LocalStorage-integration i webapplikationer er afgørende for både nybegyndere og erfarne udviklere. LocalStorage introducerer begyndere til datapersistens ved at give dem mulighed for at gemme og hente brugergenereret indhold.

LocalStorage er vigtigt, da du kan sikre, at dine brugerdata forbliver intakte på tværs af forskellige sessioner. LocalStorage eliminerer behovet for konstant serverkommunikation, hvilket fører til hurtigere indlæsningstider og forbedret respons i webapplikationer.