Kako napraviti Vue To-Do aplikaciju s LocalStorageom

LocalStorage je web API, ugrađen u preglednike, koji web aplikacijama omogućuje pohranu parova ključ-vrijednost na vaš lokalni uređaj. Omogućuje jednostavnu metodu za pohranu podataka, čak i nakon što zatvorite preglednik.

Možete integrirati LocalStorage sa svojim Vue aplikacijama za pohranu popisa i drugih podataka male veličine. To vam omogućuje održavanje korisničkih podataka kroz različite sesije aplikacije.

Nakon ovog vodiča, imat ćete funkcionalnu aplikaciju Vue to-do koja može dodavati i uklanjati zadatke, pohranjujući podatke pomoću LocalStoragea.

Postavljanje aplikacije Vue To-Do

Prije nego počnete kodirati, provjerite imate li instaliran Node i NPM na vašem uređaju.

Za izradu novog projekta pokrenite ovu naredbu npm:

npm create vue 

Naredba će od vas zahtijevati da odaberete unaprijed postavljenu postavku za svoju novu Vue aplikaciju prije stvaranja i instaliranja potrebnih ovisnosti.

Nećete trebati dodatne značajke za ovu aplikaciju zadataka, stoga odaberite "Ne" za sve dostupne unaprijed postavljene postavke.

S postavljenim projektom možete započeti s izgradnjom aplikacije za obveze s LocalStorageom.

Izrada To-Do aplikacije

Za ovaj vodič stvorit ćete dvije Vue komponente: App.vue za cjelokupnu strukturu i Todo.vue za prikaz popisa zadataka.

Stvaranje komponente To-Do

Za komponentu Todo izradite novu datoteku, src/components/Todo.vue. Ova datoteka će upravljati strukturom popisa zadataka.

Zalijepite sljedeći kod u Todo.vue datoteka:

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

Gornji isječak koda opisuje strukturu Napraviti komponenta. Postavlja komponentu za primanje podataka i emitiranje događaja korištenjem rekvizita i prilagođenih događaja.

Za dodatno objašnjenje, kod koristi Vue rekvizite za komunikaciju između komponenti primati todos niz iz nadređene komponente, App.vue. Zatim koristi v-for direktiva za iscrtavanje popisa za iteraciju kroz primljeni niz zadataka.

Kod također emitira prilagođeni događaj, ukloniti-todo, s korisnim teretom indeks. To vam omogućuje uklanjanje određenog zadatka s određenim indeksom u polju zadataka.

Pritiskom na Ukloniti gumb, isječak pokreće emitiranje prilagođenog događaja nadređenoj komponenti. Ovo označava da ste kliknuli gumb, što potiče izvršenje odgovarajuće funkcije definirane unutar nadređene komponente, App.vue.

Stvaranje komponente prikaza aplikacije

Prijeđite na App.vue za nastavak izgradnje aplikacije Todo. The aplikacija komponenta će rukovati dodavanjem novih zadataka i renderiranjem Napraviti komponenta.

Zalijepite sljedeće skripta blok u vašu App.vue datoteku:

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

Gornji isječak koda ocrtava logiku App.vue komponenta. Isječak uvozi Napraviti komponentu i inicijalizira reaktivne varijable s API-jem Vue Composition.

Kod počinje s uvozom Todo komponente i ref funkcija s navedenog puta i vue, odnosno.

Isječak zatim inicijalizira reaktivni niz, noviTodo, za pohranjivanje zadatka koji ćete unijeti. Također inicijalizira prazan reaktivni todos niz koji sadrži popis zadataka.

The addTodo funkcija dodaje nove zadatke u niz zadataka. Ako newTodo nije prazan, gura se u polje nakon potvrde i poništava vrijednost newTodo kako biste mogli dodati više zadataka.

Funkcija addTodo također poziva saveToLocalStorage, koji sprema niz zadataka u LocalStorage preglednika. Isječak koristi setItem metoda da se to postigne i pretvara niz zadataka u JSON niz prije pohrane.

Također definira a uklonitiTodo funkcija koja uzima a ključ kao parametar. Koristi ovaj ključ za uklanjanje odgovarajućeg napraviti iz niza todos. Nakon uklanjanja, funkcija removeTodo poziva saveToLocalStorage za ažuriranje podataka LocalStorage.

Na kraju, kod koristi getitem metoda dostupna LocalStorageu za dohvaćanje prethodno spremljenih zadataka pomoću tipke todos. Ako ste spremili zadatke u LocalStorage preglednika, kod ih gura u niz todos.

Sada kada ste obradili logiku komponente App.vue, zalijepite sljedeći kod u šablona blok vaše aplikacije Vue za izradu korisničkog sučelja:

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

Predložak koristi v-model, metoda uvezivanja podataka u Vue za vezanje unesene obveze s noviTodo reaktivni niz. Predložak također koristi v-nadirektiva za rukovanje događajima u Vue kroz njegovu skraćenicu (@).

Koristi v-on za slušanje oba klik i Unesi ključni događaji za potvrdu newTodo.

Konačno, predložak koristi Napraviti komponenta koju ste prvi stvorili za prikaz popisa zadataka. The :todos sintaksa prolazi todos niz kao potporu Todo komponente.

The @ukloni-todo sintaksa postavlja slušatelja događaja za hvatanje prilagođenog događaja koji je komponenta Todo emitirala i poziva uklonitiTodo funkcija kao odgovor.

Sada kada ste dovršili aplikaciju, možete je stilizirati po svom ukusu. Svoju aplikaciju možete pregledati pokretanjem ove naredbe:

npm run dev

Trebali biste vidjeti ovakav zaslon:

Možete dodati ili ukloniti zadatke unutar aplikacije Todo. Štoviše, zahvaljujući integraciji LocalStoragea, možete osvježiti aplikaciju ili je u potpunosti zatvoriti; vaš odabrani popis obaveza ostat će netaknut.

Važnost LocalStorage

Integracija LocalStoragea u web aplikacije neophodna je i početnicima i iskusnim programerima. LocalStorage uvodi početnike u postojanost podataka dopuštajući im pohranjivanje i dohvaćanje sadržaja koji generiraju korisnici.

LocalStorage je važan jer možete osigurati da vaši korisnički podaci ostanu netaknuti tijekom različitih sesija. LocalStorage eliminira potrebu za stalnom komunikacijom s poslužiteljem, što dovodi do bržeg vremena učitavanja i poboljšanog odziva web aplikacija.