Kuidas luua Vue To-Do rakendust LocalStorage'iga

LocalStorage on brauseritesse sisseehitatud veebi API, mis võimaldab veebirakendustel salvestada teie kohalikku seadmesse võtme-väärtuse paare. See pakub lihtsat meetodit andmete salvestamiseks isegi pärast brauseri sulgemist.

Loendite ja muude väikesemahuliste andmete salvestamiseks saate integreerida LocalStorage'i oma Vue rakendustega. See võimaldab teil säilitada kasutajaandmeid erinevate rakenduseseansside lõikes.

Pärast seda õpetust on teil funktsionaalne Vue ülesannete rakendus, mis saab ülesandeid lisada ja eemaldada, salvestades andmed LocalStorage'i abil.

Rakenduse Vue To-Do seadistamine

Enne kodeerimise alustamist veenduge, et teil on installitud Node ja NPM teie seadmesse.

Uue projekti loomiseks käivitage see npm käsk:

npm create vue 

Enne vajalike sõltuvuste loomist ja installimist peate selle käsu jaoks valima oma uue Vue rakenduse eelseadistuse.

Te ei vaja selle ülesannete rakenduse jaoks lisafunktsioone, seega valige kõigi saadaolevate eelseadete jaoks "Ei".

Kui projekt on seadistatud, saate alustada ülesanderakenduse koostamist LocalStorage'iga.

Ülesannete rakenduse loomine

Selle õpetuse jaoks loote kaks Vue komponenti: App.vue üldise struktuuri jaoks ja Todo.vue ülesannete loendi kuvamiseks.

Ülesannete komponendi loomine

Todo komponendi jaoks looge uus fail, src/components/Todo.vue. See fail käsitleb ülesannete loendi struktuuri.

Kleepige järgmine kood jaotisesse Todo.vue fail:

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

Ülaltoodud koodilõik kirjeldab selle struktuuri Tegema komponent. See seadistab komponendi andmete vastuvõtmiseks ja sündmuste väljastamiseks vastavalt rekvisiitide ja kohandatud sündmuste abil.

Täpsemaks selgitamiseks kasutab kood Vue rekvisiidid komponentidevaheliseks suhtlemiseks saada kätte todos massiiv oma emakomponendist, App.vue. Seejärel kasutab see v-nimekirjade renderdamise käskkiri vastuvõetud todos massiivi kordamiseks.

Kood väljastab ka kohandatud sündmuse, eemalda-todo, kasuliku koormaga indeks. See võimaldab teil eemaldada konkreetse indeksiga konkreetse ülesande todos massiivist.

Klõpsates Eemalda nuppu, käivitab koodilõik kohandatud sündmuse edastamise ülemkomponendile. See näitab, et olete klõpsanud nuppu, käivitades vastava funktsiooni, mis on määratletud põhikomponendis App.vue.

Rakenduse vaate komponendi loomine

Suunduge poole App.vue et jätkata rakenduse Todo loomist. The Rakendus komponent tegeleb uute ülesannete lisamise ja renderdamisega Tegema komponent.

Kleepige järgmine stsenaarium blokeerige oma App.vue faili:

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

Ülaltoodud koodilõik kirjeldab loogikat App.vue komponent. Koopia impordib Tegema komponent ja initsialiseerib reaktiivsed muutujad Vue Composition API-ga.

Kood algab komponendi Todo importimisega ja viide funktsiooni määratud teelt ja vue, vastavalt.

Seejärel lähtestab koodilõik reaktiivse stringi, uusTodo, et salvestada sisestatav ülesanne. Samuti initsialiseerib see tühja reaktiivi todos massiiv, hoides ülesannete loendit.

The addTodo funktsioon lisab massiivi todos uusi ülesandeid. Kui newTodo pole tühi, lükatakse see kinnitusel massiivi ja lähtestab newTodo väärtuse, et saaksite lisada rohkem ülesandeid.

Funktsioon addTodo kutsub ka esile SaveToLocalStorage, mis salvestab todos massiivi brauseri LocalStorage'i. Lõik kasutab setItem meetod selle saavutamiseks ja teisendab todos massiivi enne salvestamist JSON-stringiks.

See määratleb ka a eemaldaTodo funktsioon, mis võtab a võti parameetrina. Ta kasutab seda klahvi vastava eemaldamiseks tegema massiivist todos. Pärast eemaldamist kutsub funktsioon removeTodo LocalStorage'i andmete värskendamiseks välja funktsiooni saveToLocalStorage.

Lõpuks kasutab kood hankige üksus meetod, mis on LocalStorage'i jaoks saadaval, et tuua varem salvestatud ülesanded klahviga Todos. Kui olete ülesanded salvestanud brauseri LocalStorage'i, surub kood need ülesannete massiivi.

Nüüd olete App.vue komponendi loogikaga hakkama saanud, kleepige järgmine kood malli kasutajaliidese loomiseks oma Vue rakenduse plokk:

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

Mall kasutab v-mudel, meetod andmete sidumiseks Vue-s sisestatud ülesande sidumiseks uusTodo reaktiivne string. Mall kasutab ka v-ondirektiiv sündmuste käsitlemiseks Vues selle stenogrammi kaudu (@).

See kasutab v-on kuulamiseks mõlemat klõpsa ja sisenema võtmesündmused uue ülesande kinnitamiseks.

Lõpuks kasutab mall Tegema komponendi, mille lõite esmalt ülesannete loendi renderdamiseks. The :todos süntaks läbib todos massiivi Todo komponendi rekvisiidina.

The @remove-todo süntaks seadistab sündmustekuulaja, et jäädvustada kohandatud sündmus, mille Todo komponent väljastas ja kutsuda eemaldaTodo funktsioon vastuseks.

Nüüd olete rakenduse lõpetanud ja saate selle oma maitse järgi kujundada. Saate oma rakenduse eelvaate vaadata, käivitades selle käsu:

npm run dev

Peaksite nägema sellist ekraani:

Saate rakenduses Todo ülesandeid lisada või eemaldada. Veelgi enam, tänu LocalStorage'i integreerimisele saate rakendust värskendada või sellest täielikult väljuda; teie kureeritud ülesannete loend jääb puutumatuks.

LocalStorage'i tähtsus

LocalStorage'i integreerimine veebirakendustesse on oluline nii algajatele kui ka kogenud arendajatele. LocalStorage tutvustab algajatele andmete püsivust, võimaldades neil salvestada ja hankida kasutaja loodud sisu.

LocalStorage on oluline, kuna saate tagada, et teie kasutajaandmed jäävad erinevate seansside jooksul puutumatuks. LocalStorage välistab vajaduse pideva serverisuhtluse järele, mis toob kaasa kiiremad laadimisajad ja parema reageerimisvõime veebirakendustes.