Hoe u een Vue To-Do-app bouwt met LocalStorage

LocalStorage is een web-API, ingebouwd in browsers, waarmee webapplicaties sleutel-waardeparen op uw lokale apparaat kunnen opslaan. Het biedt een eenvoudige methode om gegevens op te slaan, zelfs nadat u uw browser heeft gesloten.

U kunt LocalStorage integreren met uw Vue-apps om lijsten en andere kleine gegevens op te slaan. Hierdoor kunt u gebruikersgegevens voor verschillende app-sessies bijhouden.

Na deze tutorial heb je een functionele Vue to-do-app die taken kan toevoegen en verwijderen, en de gegevens kan opslaan met LocalStorage.

De Vue To-Do-applicatie instellen

Voordat u begint met coderen, moet u ervoor zorgen dat u dit gedaan heeft Node en NPM op uw apparaat geïnstalleerd.

Om een ​​nieuw project te maken, voert u deze npm-opdracht uit:

npm create vue 

Voor deze opdracht moet u een voorinstelling voor uw nieuwe Vue-toepassing selecteren voordat u de benodigde afhankelijkheden maakt en installeert.

Voor deze to-do-app heb je geen extra functies nodig, dus kies ‘Nee’ voor alle beschikbare presets.

Nu het project is opgezet, kunt u beginnen met het bouwen van de to-do-applicatie met LocalStorage.

De To-Do-applicatie maken

Voor deze zelfstudie maakt u twee Vue-componenten: App.vue voor de algemene structuur en Todo.vue om een ​​lijst met taken weer te geven.

Het to-do-onderdeel maken

Maak voor de Todo-component een nieuw bestand, src/components/Todo.vue. Dit bestand zorgt voor de structuur van de lijst met taken.

Plak de volgende code in het Todo.vue bestand:

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

Het bovenstaande codefragment beschrijft de structuur van het Te doen bestanddeel. Het stelt de component in om gegevens te ontvangen en gebeurtenissen uit te zenden door respectievelijk rekwisieten en aangepaste gebeurtenissen te gebruiken.

Om het verder uit te leggen, maakt de code gebruik van Vue-rekwisieten voor communicatie tussen componenten om de te ontvangen alles array van de bovenliggende component, App.vue. Er wordt dan gebruik gemaakt van de v-for-richtlijn voor het weergeven van lijsten om de ontvangen todos-array te doorlopen.

De code verzendt ook een aangepaste gebeurtenis, verwijder-todo, met een lading inhoudsopgave. Hiermee kunt u een bepaalde taak met een specifieke index in de todos-array verwijderen.

Door te klikken op de Verwijderen knop activeert het fragment de verzending van de aangepaste gebeurtenis naar de bovenliggende component. Dit geeft aan dat u op de knop hebt geklikt, waardoor de overeenkomstige functie wordt uitgevoerd die is gedefinieerd in de bovenliggende component, App.vue.

De weergavecomponent van de toepassing maken

Ga naar App.vue om door te gaan met het bouwen van de Todo-applicatie. De App component zorgt voor het toevoegen van nieuwe taken en het weergeven van de Te doen bestanddeel.

Plak het volgende script blokkeren in uw App.vue-bestand:

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

Het bovenstaande codefragment schetst de logica van het App.vue bestanddeel. Het fragment importeert de Te doen component en initialiseert reactieve variabelen met de Vue Composition API.

De code begint met het importeren van de Todo-component en de ref functie vanaf het opgegeven pad en kijkrespectievelijk.

Het fragment initialiseert vervolgens een reactieve tekenreeks, nieuwTodo, om de taak die u invoert op te slaan. Het initialiseert ook een lege reactieve alles array, met de lijst met taken.

De toevoegenTodo functie voegt nieuwe taken toe aan de todos-array. Als newTodo niet leeg is, wordt het bij bevestiging in de array gepusht en wordt de newTodo-waarde opnieuw ingesteld, zodat u meer taken kunt toevoegen.

De addTodo-functie roept ook de opslaanNaarLokaleOpslag, waarmee de todos-array wordt opgeslagen in de LocalStorage van de browser. Het fragment maakt gebruik van de setItem methode om dit te bereiken en converteert de todos-array naar een JSON-tekenreeks vóór opslag.

Het definieert ook a verwijderTodo functie die a nodig heeft sleutel als parameter. Het gebruikt deze sleutel om het overeenkomstige te verwijderen Te doen uit de todos-array. Na verwijdering roept de functie removeTodo de saveToLocalStorage aan om de LocalStorage-gegevens bij te werken.

Ten slotte gebruikt de code de krijgItem methode beschikbaar voor LocalStorage om eerder opgeslagen taken op te halen met de todos-toets. Als u taken in de LocalStorage van de browser hebt opgeslagen, duwt de code deze naar de todos-array.

Nu je de logica van de App.vue-component hebt afgehandeld, plak je de volgende code in het sjabloon blok van uw Vue-app om de gebruikersinterface te maken:

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

De sjabloon gebruikt v-model, een methode om gegevens in Vue te binden om de ingevoerde taak te binden aan de nieuwTodo reactieve reeks. De sjabloon maakt ook gebruik van de v-aanrichtlijn voor het afhandelen van evenementen in Vue via zijn afkorting (@).

Het gebruikt v-on om naar zowel de Klik En binnenkomen belangrijke gebeurtenissen om de newTodo te bevestigen.

Ten slotte gebruikt de sjabloon de Te doen component die u als eerste hebt gemaakt om de lijst met taken weer te geven. De :todos syntaxis geeft de alles array als een prop voor de Todo-component.

De @verwijder-todo syntaxis stelt een gebeurtenislistener in om de aangepaste gebeurtenis vast te leggen die de Todo-component heeft uitgezonden en de verwijderTodo functie als reactie.

Nu je de aanvraag hebt afgerond, kun je ervoor kiezen om deze naar jouw smaak te stylen. U kunt een voorbeeld van uw toepassing bekijken door deze opdracht uit te voeren:

npm run dev

Je zou een scherm als dit moeten zien:

Je kunt taken toevoegen of verwijderen binnen de Todo-applicatie. Bovendien kunt u dankzij de integratie van LocalStorage de applicatie vernieuwen of helemaal afsluiten; uw samengestelde takenlijst blijft intact.

Belang van lokale opslag

LocalStorage-integratie in webapplicaties is essentieel voor zowel beginnende als ervaren ontwikkelaars. LocalStorage laat beginners kennismaken met datapersistentie door hen in staat te stellen door gebruikers gegenereerde inhoud op te slaan en op te halen.

LocalStorage is belangrijk omdat u ervoor kunt zorgen dat uw gebruikersgegevens tijdens verschillende sessies intact blijven. LocalStorage elimineert de noodzaak van constante servercommunicatie, wat leidt tot snellere laadtijden en verbeterde responsiviteit in webapplicaties.