Hvordan bygge en Vue To-Do-app med LocalStorage

LocalStorage er et web-API, innebygd i nettlesere, som lar nettapplikasjoner lagre nøkkelverdi-par på din lokale enhet. Det gir en enkel metode for å lagre data, selv etter at du lukker nettleseren.

Du kan integrere LocalStorage med Vue-appene dine for å lagre lister og andre små data. Dette lar deg vedlikeholde brukerdata på tvers av ulike appøkter.

Etter denne opplæringen har du en funksjonell Vue-to-do-app som kan legge til og fjerne oppgaver, lagre dataene ved hjelp av LocalStorage.

Sette opp Vue To-Do-applikasjonen

Før du begynner å kode, sørg for at du har installert Node og NPM på enheten din.

For å opprette et nytt prosjekt, kjør denne npm-kommandoen:

npm create vue 

Kommandoen krever at du velger en forhåndsinnstilling for din nye Vue-applikasjon før du oppretter og installerer de nødvendige avhengighetene.

Du trenger ikke ekstra funksjoner for denne gjøremålsappen, så velg "Nei" for alle tilgjengelige forhåndsinnstillinger.

Med prosjektet satt opp, kan du begynne å bygge gjøremålsapplikasjonen med LocalStorage.

Opprette gjøremålsapplikasjonen

For denne opplæringen vil du lage to Vue-komponenter: App.vue for den generelle strukturen og Todo.vue for å vise en liste over oppgaver.

Opprette gjøremålskomponenten

For Todo-komponenten, opprett en ny fil, src/components/Todo.vue. Denne filen vil håndtere strukturen til listen over oppgaver.

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

Kodebiten ovenfor beskriver strukturen til Å gjøre komponent. Den setter opp komponenten til å motta data og sende ut hendelser gjennom bruk av henholdsvis rekvisitter og tilpassede hendelser.

For å forklare ytterligere, bruker koden Vue rekvisitter for kommunikasjon mellom komponenter å motta todos array fra den overordnede komponenten, App.vue. Den bruker da v-for-direktiv for gjengivelse av lister å iterere gjennom den mottatte todos-matrisen.

Koden sender også ut en egendefinert hendelse, fjerne-todo, med nyttelast indeks. Dette lar deg fjerne en bestemt oppgave med en spesifikk indeks i todos-matrisen.

Ved å klikke på Fjerne knappen, utløser kodebiten emisjonen av den egendefinerte hendelsen til den overordnede komponenten. Dette indikerer at du har klikket på knappen, og ber om utførelse av den tilsvarende funksjonen som er definert i den overordnede komponenten, App.vue.

Opprette programmets visningskomponent

Gå over til App.vue for å fortsette å bygge Todo-applikasjonen. De App komponenten vil håndtere å legge til nye oppgaver og gjengi Å gjøre komponent.

Lim inn følgende manus blokker i App.vue-filen din:

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

Kodebiten ovenfor skisserer logikken til App.vue komponent. Koden importerer Å gjøre komponent og initialiserer reaktive variabler med Vue Composition API.

Koden begynner med importen av Todo-komponenten og ref funksjon fra den angitte banen og vue, henholdsvis.

Utdraget initialiserer deretter en reaktiv streng, newTodo, for å lagre oppgaven du skal legge inn. Den initialiserer også en tom reaktiv todos array, holder listen over oppgaver.

De addTodo funksjonen legger til nye oppgaver til todos-matrisen. Hvis newTodo ikke er tom, skyves den inn i matrisen ved bekreftelse og tilbakestiller newTodo-verdien slik at du kan legge til flere oppgaver.

AddTodo-funksjonen påkaller også saveToLocalStorage, som lagrer todos-matrisen i nettleserens LocalStorage. Utdraget bruker settItem metode for å oppnå dette og konverterer todos-arrayen til en JSON-streng før lagring.

Den definerer også en fjern Todo funksjon som tar en nøkkel som en parameter. Den bruker denne tasten for å fjerne den tilsvarende å gjøre fra todos-arrayet. Etter fjerning kaller removeTodo-funksjonen saveToLocalStorage for å oppdatere LocalStorage-dataene.

Til slutt bruker koden getItem metode tilgjengelig for LocalStorage for å hente tidligere lagrede oppgaver med todos-nøkkelen. Hvis du har lagret oppgaver i nettleserens LocalStorage, skyver koden dem inn i todos-matrisen.

Nå du har håndtert logikken til App.vue-komponenten, lim inn følgende kode i mal blokk av Vue-appen din for å lage brukergrensesnittet:

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

Malen bruker v-modell, en metode for å binde data i Vue å binde den inntastede gjøremålet til newTodo reaktiv streng. Malen bruker også v-pådirektiv for håndtering av hendelser i Vue gjennom sin stenografi (@).

Den bruker v-on for å lytte til både klikk og Tast inn viktige hendelser for å bekrefte den nye Todo.

Til slutt bruker malen Å gjøre komponenten du opprettet først for å gjengi listen over gjøremål. De :todos syntaks passerer todos array som en rekvisitt til Todo-komponenten.

De @fjern-todo syntaks setter opp en hendelseslytter for å fange opp den tilpassede hendelsen Todo-komponenten sendte ut og kalle fjern Todo funksjon som svar.

Nå du har fullført søknaden, kan du velge å style den etter din smak. Du kan forhåndsvise applikasjonen din ved å kjøre denne kommandoen:

npm run dev

Du bør se en skjerm som dette:

Du kan legge til eller fjerne oppgaver i Todo-applikasjonen. Takket være integreringen av LocalStorage kan du dessuten oppdatere applikasjonen eller avslutte den helt; den kurerte gjøremålslisten din vil vedvare intakt.

Viktigheten av LocalStorage

LocalStorage-integrasjon i webapplikasjoner er avgjørende for både nybegynnere og erfarne utviklere. LocalStorage introduserer nybegynnere til datautholdenhet ved å la dem lagre og hente brukergenerert innhold.

LocalStorage er viktig siden du kan sikre at brukerdataene dine forblir intakte på tvers av ulike økter. LocalStorage eliminerer behovet for konstant serverkommunikasjon, noe som fører til raskere lastetider og forbedret respons i webapplikasjoner.