Kā izveidot Vue To-Do lietotni, izmantojot LocalStorage

LocalStorage ir pārlūkprogrammās iebūvēta tīmekļa API, kas ļauj tīmekļa lietojumprogrammām saglabāt atslēgu vērtību pārus jūsu vietējā ierīcē. Tas nodrošina vienkāršu datu glabāšanas metodi pat pēc pārlūkprogrammas aizvēršanas.

Varat integrēt LocalStorage ar savām Vue lietotnēm, lai saglabātu sarakstus un citus maza izmēra datus. Tas ļauj saglabāt lietotāja datus dažādās lietotņu sesijās.

Pēc šīs apmācības jums būs funkcionāla Vue uzdevumu lietotne, kas var pievienot un noņemt uzdevumus, saglabājot datus, izmantojot LocalStorage.

Lietojumprogrammas Vue To-Do iestatīšana

Pirms sākat kodēt, pārliecinieties, vai tas ir jūsu ierīcē instalēja Node un NPM.

Lai izveidotu jaunu projektu, palaidiet šo npm komandu:

npm create vue 

Pirms nepieciešamo atkarību izveides un instalēšanas komandai būs jāizvēlas priekšiestatījums jaunajai Vue lietojumprogrammai.

Šai uzdevumu lietotnei jums nebūs vajadzīgas papildu funkcijas, tāpēc izvēlieties "Nē" visiem pieejamajiem sākotnējiem iestatījumiem.

Kad projekts ir iestatīts, varat sākt veidot uzdevumu lietojumprogrammu, izmantojot LocalStorage.

Uzdevumu lietojumprogrammas izveide

Šajā apmācībā jūs izveidosit divus Vue komponentus: App.vue kopējai struktūrai un Todo.vue, lai parādītu uzdevumu sarakstu.

Uzdevumu komponenta izveide

Komponentam Todo izveidojiet jaunu failu, src/components/Todo.vue. Šis fails apstrādās uzdevumu saraksta struktūru.

Ielīmējiet tālāk norādīto kodu Todo.vue fails:

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

Iepriekš minētajā koda fragmentā ir detalizēti aprakstīta koda struktūra Darīt komponents. Tas iestata komponentu datu saņemšanai un notikumu izstarošanai, izmantojot attiecīgi rekvizītus un pielāgotus notikumus.

Lai paskaidrotu sīkāk, kods izmanto Vue rekvizīti saziņai starp komponentiem lai saņemtu todos masīvs no tā vecākkomponenta, App.vue. Pēc tam tas izmanto v-for direktīva par renderēšanas sarakstu lai atkārtotu saņemto todos masīvu.

Kods arī izstaro pielāgotu notikumu, noņemt-todo, ar kravnesību rādītājs. Tas ļauj noņemt konkrētu uzdevumu ar noteiktu indeksu todos masīvā.

Noklikšķinot uz Noņemt pogu, fragments aktivizē pielāgotā notikuma nosūtīšanu uz vecākkomponentu. Tas norāda, ka esat noklikšķinājis uz pogas, aicinot izpildīt atbilstošo funkciju, kas definēta vecākkomponentā App.vue.

Lietojumprogrammas skata komponenta izveide

Dodieties uz App.vue lai turpinātu veidot lietojumprogrammu Todo. The App komponents apstrādās jaunu uzdevumu pievienošanu un atveidošanu Darīt komponents.

Ielīmējiet tālāk norādīto skripts bloķēt savā App.vue failā:

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

Iepriekš minētais koda fragments iezīmē loģiku App.vue komponents. Fragments importē Darīt komponents un inicializē reaktīvos mainīgos ar Vue Compposition API.

Kods sākas ar Todo komponenta importēšanu un ref funkciju no norādītā ceļa un vue, attiecīgi.

Pēc tam fragments inicializē reaktīvo virkni, jaunsTodo, lai saglabātu ievadīto uzdevumu. Tas arī inicializē tukšu reaktīvo todos masīvs, turot uzdevumu sarakstu.

The addTodo funkcija pievieno jaunus uzdevumus todos masīvam. Ja newTodo nav tukšs, tas tiek iespiests masīvā pēc apstiprināšanas un atiestata newTodo vērtību, lai jūs varētu pievienot citus uzdevumus.

Funkcija addTodo arī izsauc saglabāt Vietējā krātuvē, kas saglabā todos masīvu pārlūkprogrammas LocalStorage. Fragments izmanto setItem metodi, lai to panāktu, un pirms uzglabāšanas pārvērš todos masīvu par JSON virkni.

Tas arī definē a noņemtTodo funkcija, kas aizņem a taustiņu kā parametrs. Tas izmanto šo taustiņu, lai noņemtu atbilstošo darīt no todos masīva. Pēc noņemšanas funkcija removeTodo izsauc saveToLocalStorage, lai atjauninātu LocalStorage datus.

Visbeidzot, kods izmanto getItem Vietnei krātuvei pieejamā metode, lai iegūtu iepriekš saglabātus uzdevumus, izmantojot todos taustiņu. Ja esat saglabājis uzdevumus pārlūkprogrammas LocalStorage, kods tos nospiež uzdevumu masīvā.

Tagad esat apstrādājis App.vue komponenta loģiku, ielīmējiet tālāk norādīto kodu veidne jūsu Vue lietotnes bloku, lai izveidotu lietotāja interfeisu:

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

Veidne izmanto v-modelis, metode datu saistīšanai Vue lai saistītu ievadīto uzdevumu ar jaunsTodo reaktīvā virkne. Veidnē tiek izmantots arī v-ondirektīva par notikumu apstrādi Vue izmantojot tā saīsinājumu (@).

Tas izmanto v-on, lai klausītos gan klikšķis un ievadiet galvenie notikumi, lai apstiprinātu jaunoTodo.

Visbeidzot, veidnē tiek izmantots Darīt komponents, kuru izveidojāt vispirms, lai renderētu uzdevumu sarakstu. The :todos sintakse iztur todos masīvs kā Todo komponenta rekvizīts.

The @remove-todo sintakse iestata notikumu uztvērēju, lai tvertu pielāgoto notikumu, ko izstaro Todo komponents, un izsauktu to noņemtTodo funkcija atbildē.

Tagad esat aizpildījis pieteikumu, varat izvēlēties veidot to pēc savas gaumes. Varat priekšskatīt savu lietojumprogrammu, izpildot šo komandu:

npm run dev

Jums vajadzētu redzēt šādu ekrānu:

Varat pievienot vai noņemt uzdevumus lietojumprogrammā Todo. Turklāt, pateicoties LocalStorage integrācijai, varat atsvaidzināt lietojumprogrammu vai pilnībā iziet no tās; jūsu atlasītais uzdevumu saraksts paliks neskarts.

Vietējās krātuves nozīme

LocalStorage integrācija tīmekļa lietojumprogrammās ir būtiska gan iesācējiem, gan pieredzējušiem izstrādātājiem. LocalStorage iepazīstina iesācējus ar datu noturību, ļaujot viņiem saglabāt un izgūt lietotāja ģenerētu saturu.

Vietējā krātuve ir svarīga, jo varat nodrošināt, ka jūsu lietotāja dati paliek neskarti dažādās sesijās. Vietējā krātuve novērš nepieciešamību pēc pastāvīgas servera saziņas, kas nodrošina ātrāku ielādes laiku un uzlabo tīmekļa lietojumprogrammu reaģētspēju.