Hoe bouw je een Vue-to-do-app met LocalStorage?

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

De integratie van LocalStorage in Vue-toepassingen vergemakkelijkt het bewaren van gebruikersgegevens tijdens verschillende sessies, waardoor lijsten en kleinere stukjes informatie kunnen worden opgeslagen voor een naadloze continuïteit van de gebruikerservaring.

Na afloop van deze tutorial zal men beschikken over een volledig operationele Vue to-do applicatie die in staat is taken toe te voegen en te verwijderen terwijl gebruik wordt gemaakt van LocalStorage voor gegevensopslagdoeleinden.

De Vue-to-do-applicatie opzetten

Zorg ervoor dat je zowel Node als NPM goed hebt geïnstalleerd op je computersysteem voordat je begint met programmeren.

Voer de volgende npm-instructie uit om een nieuwe onderneming op te zetten:

 npm create vue

Voordat je een nieuwe Vue-toepassing genereert, is het nodig om een vooraf gedefinieerde configuratie of setup te kiezen uit een lijst met beschikbare opties om het installatieproces te begeleiden. Deze selectie zorgt ervoor dat de gewenste eigenschappen en functionaliteiten in het project worden opgenomen volgens de opgegeven voorkeuren.

Er is geen behoefte aan extra functionaliteiten in deze toepassing voor taakbeheer, daarom is het verstandig om “Nee” te selecteren voor elk van de aangeboden opties.

Zodra het project is geconfigureerd en geïnitialiseerd, kan men beginnen met het bouwen van een taakbeheerprogramma met LocalStorage als basis.

De To-Do Applicatie maken

Een die de algemene lay-out omvat (App.vue) en een andere die een inventaris van taken weergeeft (Todo.vue).

Het maken van het To-Do component

Om het Todo component te ontwikkelen, is het nodig om een nieuw bestand te maken in de “src/components” map en het te benoemen als “Todo.vue”. De primaire functie van dit bestand is het beheren van de organisatorische indeling van de takenlijst.

php Mijn Todos {{ todo.text }} Delete import { mapGetters } from ‘vue’export default {name: “Todo”,data() {return {todos: [] // lege array van todo’s initialiseren}},computed: {…mapGetters([’todos’]

 <!-- Todo.vue -->
<script setup>
const props = defineProps(['todos']);
const emit = defineEmits(['remove-todo']);

const removeTodo = (index) => {
  emit('remove-todo', index);
};
</script>

<template>
  <div class="todo-list">
    <ul>
      <li v-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 meegeleverde codefragment schetst de architectuur van het Todo-component. Door gebruik te maken van props voor gegevensoverdracht en aangepaste gebeurtenissen te gebruiken voor het uitzenden van gebeurtenissen, creëert deze component een manier om zowel informatie te ontvangen als gebeurtenissen te verzenden, waardoor naadloze communicatie tussen de verschillende elementen mogelijk wordt.

De code maakt gebruik van Vue props als communicatiemiddel tussen componenten om de “todos” array op te halen uit het bovenliggende component, App.vue. De “v-for”-richtlijn wordt vervolgens gebruikt om iteratief een lijst te renderen op basis van de opgehaalde todos-array.

De code genereert een unieke gebeurtenis, bekend als “remove-todo”, die een bijbehorende payload bevat, geïdentificeerd als “index”. Door gebruik te maken van deze gebeurtenis en de bijbehorende payload, kan men effectief een specifiek item verwijderen binnen de bredere “todo’s”-array met een aangewezen numerieke indexwaarde.

Wanneer er op de knop “Verwijderen” wordt geklikt, wordt er een aangepast event uitgezonden door het bijbehorende knipsel, dat wordt doorgestuurd naar het bovenliggende component, om aan te geven dat er interactie is geweest met de knop en om de uitvoering van de gespecificeerde functie in het bovenliggende component, namelijk App.vue, te starten.

Het View Component van de applicatie maken

Ga verder met het App.vue bestand om de To-Do applicatie verder te ontwikkelen. Het App component is verantwoordelijk voor het aanmaken van taken en het weergeven van het To-Do component op het scherm.

“Welkom terug!",duur: 5000,position: ’top-right’,hideProgressBar: true,isAjax: false,afterClose: () => {/ Navigeer naar home pagenavigate(’/home’)},})} else {console.log( Onbekende status: ${store.value} )})

 <!-- App.vue -->
<script setup>
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 beschrijft de onderliggende redenering van het App.vue component, dat de import en initialisatie van reactieve parameters via de Vue Composition API van het Todo component omvat.

De eerste stap in het implementatieproces bestaat uit het importeren van zowel het Todo-component als een referentiefunctie, die beide zijn afgeleid van verschillende bronnen - het Todo-component wordt verkregen via een geïmporteerde module die zich op een vooraf gedefinieerd pad bevindt, terwijl de referentiefunctie afkomstig is uit de Vue-bibliotheek zelf.

Het code segment maakt vervolgens een responsieve string identifier, genaamd “newTodo”, voor de taak die zal worden ingevoerd. Daarnaast wordt er een lege reactieve matrix genaamd “todo’s” aangemaakt die dient als opslagplaats voor de lijst met taken.

De functie addTodo dient om nieuwe taken op te nemen in de bestaande lijst van todo's . Op voorwaarde dat de invoervariabele newTodo een niet-null-waarde bevat, wordt deze aan de matrix toegevoegd na bevestiging door de gebruiker, waardoor de inhoud van newTodo wordt gereset om verdere taakinvoer mogelijk te maken.

De addTodo functie voegt niet alleen een nieuw todo-item toe, maar roept ook de saveToLocalStorage functie op, die de bijgewerkte todo's matrix opslaat in de lokale opslag van de browser met behulp van de setItem methode. Voordat het wordt opgeslagen, wordt de todos matrix echter geconverteerd naar een JSON-tekenreeks voor eenvoudigere verwerking tijdens het ophalen.

De implementatie van removeTodo bestaat uit het accepteren van een specifieke identificatie als invoer, aangeduid als een “sleutel”, die vervolgens wordt gebruikt om de corresponderende taak te verwijderen uit de verzameling taken, bekend als de “todos”-array. Na het verwijderingsproces roept de functie removeTodo de methode saveToLocalStorage aan om de opgeslagen gegevens binnen het lokale opslagsysteem van de browser bij te werken.

Tot slot maakt het programma gebruik van de getItem functie die inherent is aan Lokale Opslag om eerder opgeslagen taken onder de sleutel ’todo’s’ op te halen. Als er taken in de lokale opslag van de browser zijn opgeslagen, worden ze toegevoegd aan de ’todo’s’-array.

De bovenstaande code is een sjabloon voor de gebruikersinterface van een toepassing die is geschreven met het Vue-framework. Het bevat een div element met het id “app” dat dient als de root node voor de UI van de applicatie en bevat een titel, een formulier en een knop element. Het title-element geeft tekst weer tussen twee h1-elementen, terwijl het form- en button-element niet zichtbaar zijn omdat ze nog niet bestaan.

 <!-- App.vue -->
<template>
  <div class="app">
    <h1>To do List</h1>
    <div class="add-todo">
      <input v-model="newTodo" @keyup.enter="addTodo"
        placeholder="Add a new task" class="todo-input" />

      <button @click="addTodo" class="add-button">Add</button>
    </div>
    <Todo :todos="todos" @remove-todo="removeTodo" />
  </div>
</template>

De sjabloon maakt gebruik van de richtlijn v-model , wat een mechanisme is binnen het Vue-framework voor het tot stand brengen van een tweerichtingsrelatie tussen een invoerelement en een lokale reactieve variabele of eigenschap die bekend staat als ’newTodo’. Daarnaast maakt de sjabloon gebruik van de v-on richtlijn, die dient als een middel voor event handling binnen het Vue ecosysteem door middel van de beknopte notatie aangeduid als ’ ’ gevolgd door het ‘@’ symbool, waardoor een efficiënt beheer van gebruikersinteracties met de applicatie mogelijk wordt.

De component gebruikt de richtlijn v-on om zowel de klik- als enter-toetsgebeurtenissen te controleren om de nieuw toegevoegde taak te valideren.

Tot slot maakt de sjabloon gebruik van de eerder gedefinieerde Todo-component door gebruik te maken van de tag . Dit maakt het mogelijk om de lijst met taken weer te geven door de todos-array als argument te geven aan de Todo-component via de eerder genoemde syntax “:todos”.

De @remove-todo syntaxis maakt een luisteraar voor een aangepaste gebeurtenis die wordt uitgezonden door de Todo component, en bij het detecteren van deze gebeurtenis, triggert het de aanroep van de removeTodo functie dienovereenkomstig.

Na het voltooien van de ontwikkeling van de applicatie krijg je de mogelijkheid om het uiterlijk aan te passen aan je voorkeuren. Om een demonstratie van je werk te zien, hoef je alleen maar het gegeven commando uit te voeren.

 npm run dev

Je zou een scherm als dit moeten zien:

De Todo-toepassing biedt gebruikers de mogelijkheid om naar eigen inzicht taken toe te voegen en te verwijderen. Bovendien is deze functionaliteit uitgebreid door middel van naadloze integratie met LocalStorage, wat ervoor zorgt dat zelfs bij het verversen van de applicatie of het volledig sluiten ervan, alle taakitems veilig opgeslagen blijven voor latere toegang.

Belang van LocalStorage

De integratie van LocalStorage functionaliteit binnen webplatformen is van groot belang voor zowel nieuwkomers als doorgewinterde professionals, omdat het hen inzicht geeft in het bewaren van gegevens door het mogelijk te maken door de gebruiker gecreëerde informatie te bewaren en terug te vinden.

Het gebruik van LocalStorage is voordelig omdat gebruikersgegevens blijvend worden bewaard tijdens verschillende browsersessies. Hierdoor is er geen noodzaak voor frequente serverinteracties, wat kan resulteren in betere prestaties en een hogere reactiesnelheid binnen webgebaseerde applicaties door kortere laadtijden.