So erstellen Sie eine Vue To-Do-App mit LocalStorage

LocalStorage ist eine in Browser integrierte Web-API, mit der Webanwendungen Schlüssel-Wert-Paare auf Ihrem lokalen Gerät speichern können. Es bietet eine einfache Methode zum Speichern von Daten, auch nachdem Sie Ihren Browser geschlossen haben.

Sie können LocalStorage in Ihre Vue-Apps integrieren, um Listen und andere kleine Daten zu speichern. Dadurch können Sie Benutzerdaten über verschiedene App-Sitzungen hinweg pflegen.

Nach diesem Tutorial verfügen Sie über eine funktionsfähige Vue-To-Do-App, mit der Sie Aufgaben hinzufügen und entfernen und die Daten mithilfe von LocalStorage speichern können.

Einrichten der Vue To-Do-Anwendung

Bevor Sie mit dem Codieren beginnen, stellen Sie sicher, dass Sie dies getan haben Node und NPM auf Ihrem Gerät installiert.

Um ein neues Projekt zu erstellen, führen Sie diesen npm-Befehl aus:

npm create vue 

Für den Befehl müssen Sie eine Voreinstellung für Ihre neue Vue-Anwendung auswählen, bevor Sie die erforderlichen Abhängigkeiten erstellen und installieren.

Für diese Aufgaben-App benötigen Sie keine zusätzlichen Funktionen. Wählen Sie daher für alle verfügbaren Voreinstellungen „Nein“.

Sobald das Projekt eingerichtet ist, können Sie mit der Erstellung der To-Do-Anwendung mit LocalStorage beginnen.

Erstellen der To-Do-Anwendung

Für dieses Tutorial erstellen Sie zwei Vue-Komponenten: App.vue für die Gesamtstruktur und Todo.vue zur Anzeige einer Aufgabenliste.

Erstellen der To-Do-Komponente

Erstellen Sie für die Todo-Komponente eine neue Datei. src/components/Todo.vue. Diese Datei verwaltet die Struktur der Aufgabenliste.

Fügen Sie den folgenden Code in die ein Todo.vue Datei:

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

Der obige Codeausschnitt beschreibt detailliert die Struktur des Machen Komponente. Es richtet die Komponente so ein, dass sie mithilfe von Requisiten bzw. benutzerdefinierten Ereignissen Daten empfängt und Ereignisse ausgibt.

Zur weiteren Erläuterung verwendet der Code Vue-Requisiten für die Kommunikation zwischen Komponenten um das zu erhalten alles Array aus seiner übergeordneten Komponente, App.vue. Es verwendet dann die v-for-Direktive zum Rendern von Listen um das empfangene Todos-Array zu durchlaufen.

Der Code gibt auch ein benutzerdefiniertes Ereignis aus, Remove-todo, mit einer Nutzlast Index. Dadurch können Sie eine bestimmte Aufgabe mit einem bestimmten Index im Todos-Array entfernen.

Beim Klicken auf Entfernen Wenn Sie auf die Schaltfläche klicken, löst das Snippet die Ausgabe des benutzerdefinierten Ereignisses an die übergeordnete Komponente aus. Dies zeigt an, dass Sie auf die Schaltfläche geklickt haben, wodurch die Ausführung der entsprechenden Funktion veranlasst wird, die in der übergeordneten Komponente App.vue definiert ist.

Erstellen der Ansichtskomponente der Anwendung

Geh 'rüber zu App.vue um mit der Erstellung der Todo-Anwendung fortzufahren. Der App Die Komponente übernimmt das Hinzufügen neuer Aufgaben und das Rendern Machen Komponente.

Fügen Sie Folgendes ein Skript block in Ihre App.vue-Datei:

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

Der obige Codeausschnitt beschreibt die Logik des App.vue Komponente. Das Snippet importiert die Machen Komponente und initialisiert reaktive Variablen mit der Vue Composition API.

Der Code beginnt mit dem Import der Todo-Komponente und der ref Funktion aus dem angegebenen Pfad und vue, jeweils.

Das Snippet initialisiert dann einen reaktiven String, newTodo, um die von Ihnen eingegebene Aufgabe zu speichern. Es initialisiert auch eine leere Reaktion alles Array, das die Liste der Aufgaben enthält.

Der addTodo Die Funktion fügt dem Todos-Array neue Aufgaben hinzu. Wenn newTodo nicht leer ist, wird es bei Bestätigung in das Array verschoben und setzt den newTodo-Wert zurück, damit Sie weitere Aufgaben hinzufügen können.

Die Funktion addTodo ruft auch auf saveToLocalStorage, Dadurch wird das Todos-Array im LocalStorage des Browsers gespeichert. Das Snippet verwendet die setItem Methode, um dies zu erreichen, und konvertiert das Todos-Array vor der Speicherung in einen JSON-String.

Es definiert auch a RemoveTodo Funktion, die a dauert Schlüssel als Parameter. Mit diesem Schlüssel wird das entsprechende entfernt machen aus dem Todos-Array. Nach dem Entfernen ruft die Funktion „removeTodo“ saveToLocalStorage auf, um die LocalStorage-Daten zu aktualisieren.

Schließlich verwendet der Code die getItem Methode, die LocalStorage zur Verfügung steht, um zuvor gespeicherte Aufgaben mit der Todos-Taste abzurufen. Wenn Sie Aufgaben im LocalStorage des Browsers gespeichert haben, verschiebt der Code sie in das Todos-Array.

Nachdem Sie sich nun mit der Logik der App.vue-Komponente befasst haben, fügen Sie den folgenden Code ein Vorlage Block Ihrer Vue-App, um die Benutzeroberfläche zu erstellen:

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

Die Vorlage verwendet V-Modell, eine Methode zum Binden von Daten in Vue um die eingegebene Aufgabe an die zu binden newTodo reaktive Zeichenfolge. Die Vorlage verwendet auch die v-onDirektive für den Umgang mit Ereignissen in Vue durch seine Kurzschrift (@).

Es verwendet v-on, um beide zu hören klicken Und eingeben Schlüsselereignisse zur Bestätigung des newTodo.

Schließlich verwendet die Vorlage die Machen Komponente, die Sie zuerst erstellt haben, um die Liste der Aufgaben darzustellen. Der :todos Syntax übergibt die alles Array als Requisite für die Todo-Komponente.

Der @remove-todo Die Syntax richtet einen Ereignis-Listener ein, um das von der Todo-Komponente ausgegebene benutzerdefinierte Ereignis zu erfassen und aufzurufen RemoveTodo Funktion als Antwort.

Nachdem Sie die Bewerbung fertiggestellt haben, können Sie sie nach Ihrem Geschmack gestalten. Sie können eine Vorschau Ihrer Anwendung anzeigen, indem Sie diesen Befehl ausführen:

npm run dev

Sie sollten einen Bildschirm wie diesen sehen:

Sie können Aufgaben innerhalb der Todo-Anwendung hinzufügen oder entfernen. Darüber hinaus können Sie dank der Integration von LocalStorage die Anwendung aktualisieren oder ganz beenden; Ihre kuratierte To-Do-Liste bleibt erhalten.

Bedeutung von LocalStorage

Die Integration von LocalStorage in Webanwendungen ist sowohl für Anfänger als auch für erfahrene Entwickler von entscheidender Bedeutung. LocalStorage führt Einsteiger in die Datenpersistenz ein, indem es ihnen ermöglicht, benutzergenerierte Inhalte zu speichern und abzurufen.

LocalStorage ist wichtig, da Sie sicherstellen können, dass Ihre Benutzerdaten über verschiedene Sitzungen hinweg intakt bleiben. LocalStorage macht eine ständige Serverkommunikation überflüssig, was zu schnelleren Ladezeiten und einer verbesserten Reaktionsfähigkeit in Webanwendungen führt.