Hur man bygger en Vue Att-göra-app med LocalStorage

LocalStorage är ett webb-API, inbyggt i webbläsare, som låter webbapplikationer lagra nyckel-värdepar på din lokala enhet. Det ger en enkel metod för att lagra data, även efter att du stängt din webbläsare.

LocalStorage-integrering i Vue-applikationer gör det lättare att bevara användardata under olika sessioner, vilket möjliggör lagring av listor och mindre bitar av information för sömlös kontinuitet i användarupplevelsen.

Efter den här handledningen har du en fullt fungerande Vue-to-do-applikation som kan lägga till och ta bort uppgifter och samtidigt använda LocalStorage för datalagring.

Konfigurera Vue To-Do-programmet

Se till att du har installerat både Node och NPM korrekt på ditt datorsystem innan du påbörjar några programmeringsuppgifter.

För att skapa ett nytt åtagande, utför följande npm-instruktion:

 npm create vue

Innan du skapar en ny Vue-applikation måste du välja en fördefinierad konfiguration eller inställning från en lista med tillgängliga alternativ för att vägleda installationsprocessen. Detta val säkerställer att de önskade egenskaperna och funktionerna inkluderas i projektet enligt de angivna preferenserna.

Det finns inget behov av ytterligare funktioner i denna uppgiftshanteringsapplikation, därför skulle det vara klokt att välja “Nej” för vart och ett av de erbjudna alternativen.

När projektet har konfigurerats och initialiserats kan man börja bygga ett verktyg för uppgiftshantering med LocalStorage som grund.

Skapa To-Do-programmet

en som omfattar den allmänna layouten (App.vue) och en annan som visar en förteckning över åtaganden (Todo.vue).

Skapa Todo-komponenten

För att utveckla Todo-komponenten är det nödvändigt att skapa en ny fil i katalogen “src/components” och ge den namnet “Todo.vue”. Den primära funktionen för denna fil kommer att vara att hantera det organisatoriska arrangemanget av uppgiftslistan.

php Mina Todos {{ todo.text }} Ta bort import { mapGetters } from ‘vue’export default {name: “Todo”,data() {return {todos: [] // initialisera tom matris av todos}},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>

Det medföljande kodutdraget visar arkitekturen för Todo-komponenten. Genom att utnyttja props för dataöverföring och använda anpassade händelser för händelseutsändning skapar denna komponent ett sätt på vilket den både kan ta emot information och skicka händelser, vilket underlättar sömlös kommunikation mellan dess olika element.

Koden använder Vue-props som ett sätt att kommunicera mellan komponenter för att hämta “todos”-arrayen från sin föräldrakomponent, App.vue. Direktivet “v-for” används därefter för att iterativt rendera en lista baserat på den hämtade todos-arrayen.

Koden genererar en unik händelse, känd som “remove-todo”, som innehåller en associerad nyttolast identifierad som “index”. Genom att använda denna händelse och dess motsvarande nyttolast kan man effektivt ta bort ett specifikt objekt inom den bredare “todos”-arrayen med ett angivet numeriskt indexvärde.

När du klickar på knappen “Ta bort” avges en anpassad händelse av det associerade utdraget, som sprids till den överordnade komponenten, vilket innebär att knappen har interagerats med och initierar utförandet av den angivna funktionen som finns i den överordnade komponenten, nämligen App.vue.

Skapa applikationens View-komponent

Fortsätt till App.vue-filen för att vidareutveckla To-Do-applikationen. App-komponenten är ansvarig för att hantera skapandet av uppgifter och visa To-Do-komponenten på skärmen.

“Välkommen tillbaka!",duration: 5000,position: ’top-right’,hideProgressBar: true,isAjax: false,afterClose: () => {// Navigera till startsidan pagenavigate(’/home’)},})} else {console.log( Okänt tillstånd: ${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>

Ovanstående kodutdrag visar den underliggande logiken i App.vue-komponenten, som innehåller import och initialisering av reaktiva parametrar via Vue Composition API i Todo-komponenten.

Det första steget i implementeringsprocessen innebär att importera både Todo-komponenten och en referensfunktion, som alla härrör från olika källor - specifikt erhålls Todo-komponenten genom en importerad modul som finns på en fördefinierad sökväg, medan referensfunktionen har sitt ursprung i Vue-biblioteket självt.

Kodsegmentet skapar därefter en responsiv strängidentifierare, kallad “newTodo”, för att rymma den uppgift som kommer att matas in. Dessutom skapas en tom reaktiv matris som kallas “todos” och som fungerar som ett arkiv för listning av uppgifter.

Funktionen addTodo används för att införliva nya uppgifter i den befintliga listan med todos . Förutsatt att inmatningsvariabeln newTodo innehåller ett icke-nullvärde, kommer den att läggas till i matrisen när användaren bekräftar, vilket innebär att innehållet i newTodo återställs för att möjliggöra ytterligare uppgiftsinmatningar.

Funktionen addTodo lägger inte bara till ett nytt todo-objekt utan anropar också funktionen saveToLocalStorage , som lagrar den uppdaterade todos matrisen i webbläsarens lokala lagring med hjälp av metoden setItem . Innan den lagras konverteras dock todos matrisen till en JSON-sträng för enklare bearbetning vid hämtning.

Implementeringen av removeTodo innebär att en specifik identifierare accepteras som indata, kallad en “nyckel”, som därefter används för att radera den korrelerande uppgiften från samlingen av uppgifter, känd som “todos”-arrayen. Efter borttagningsprocessen anropar funktionen removeTodo metoden saveToLocalStorage för att uppdatera de lagrade uppgifterna i webbläsarens lokala lagringssystem.

Slutligen använder programmet funktionen getItem som finns i Local Storage för att hämta tidigare lagrade uppgifter under nyckeln “todos”. Om det finns några uppgifter bevarade i webbläsarens Local Storage läggs de därefter till i ’todos’-matrisen.

Koden ovan är en mall för användargränssnittet i en applikation som skrivits med ramverket Vue. Den innehåller ett div-element med id:t “app” som fungerar som rotnod för applikationens användargränssnitt och innehåller ett titel-, ett formulär- och ett knappelement. Titelelementet visar text mellan två h1-element medan formulär- och knappelementen inte är synliga eftersom de inte existerar ännu.

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

Mallen använder direktivet v-model , som är en mekanism som används inom Vue-ramverket för att upprätta en tvåvägs databindningsrelation mellan ett inmatningselement och en lokal reaktiv variabel eller egenskap som kallas “newTodo”. Dessutom använder mallen direktivet v-on , som fungerar som ett sätt att hantera händelser inom Vue-ekosystemet med hjälp av den kortfattade notationen ’ ’ följt av symbolen ‘@’, vilket möjliggör effektiv hantering av användarinteraktioner med applikationen.

Komponenten använder direktivet v-on för att övervaka både klick- och enterhändelser i syfte att validera den nyligen tillagda uppgiften.

Sammanfattningsvis använder mallen den tidigare definierade Todo-komponenten genom att använda taggen . Detta möjliggör rendering av listan med uppgifter genom att tillhandahålla todos-arrayen som ett argument till Todo-komponenten via den ovan nämnda syntaxen, “:todos”.

Syntaxen @remove-todo skapar en lyssnare för en anpassad händelse som skickas ut av komponenten Todo , och när den upptäcker denna händelse triggar den anropandet av funktionen removeTodo i enlighet med detta.

När du har slutfört utvecklingen av applikationen får du möjlighet att anpassa dess utseende efter dina preferenser. För att se en demonstration av ditt arbete, kör helt enkelt det angivna kommandot.

 npm run dev

Du bör se en skärm som ser ut så här:

Programmet Todo ger användarna möjlighet att både lägga till och ta bort uppgifter efter eget gottfinnande. Dessutom är denna funktionalitet förbättrad genom sömlös integration med LocalStorage, vilket säkerställer att även om applikationen uppdateras eller stängs helt, förblir alla uppgiftsobjekt säkert lagrade för senare åtkomst.

Betydelsen av LocalStorage

Införlivandet av LocalStorage-funktionalitet i webbplattformar har stor betydelse för både nybörjare och erfarna proffs, eftersom det ger dem en förståelse för datalagring genom att möjliggöra bevarande och hämtning av information som skapats av användaren.

Att använda LocalStorage är fördelaktigt eftersom det bevarar användardata över olika webbläsarsessioner och därmed minskar behovet av frekventa serverinteraktioner, vilket kan leda till förbättrad prestanda och ökad respons inom webbaserade applikationer genom kortare laddningstider.