Kaip sukurti „Vue To-Do“ programą naudojant „LocalStorage“.

„LocalStorage“ yra žiniatinklio API, integruota į naršykles, leidžianti žiniatinklio programoms saugoti raktų ir verčių poras jūsų vietiniame įrenginyje. Tai paprastas duomenų saugojimo būdas net uždarius naršyklę.

Galite integruoti „LocalStorage“ su „Vue“ programomis, kad saugotumėte sąrašus ir kitus mažo dydžio duomenis. Tai leidžia išlaikyti naudotojo duomenis skirtingose ​​programos sesijose.

Po šios pamokos turėsite funkcionalią „Vue“ užduočių programą, kuri gali pridėti ir pašalinti užduotis, saugodama duomenis naudodami „LocalStorage“.

„Vue To-Do“ programos nustatymas

Prieš pradėdami koduoti, įsitikinkite, kad turite įrenginyje įdiegėte Node ir NPM.

Norėdami sukurti naują projektą, paleiskite šią npm komandą:

npm create vue 

Prieš kurdami ir diegdami reikiamas priklausomybes, komanda turės pasirinkti naujos „Vue“ programos išankstinį nustatymą.

Jums nereikės papildomų funkcijų šiai užduočių programai, todėl pasirinkite „Ne“ visiems galimiems išankstiniams nustatymams.

Sukūrę projektą, galite pradėti kurti užduočių programą naudodami „LocalStorage“.

To-Do programos kūrimas

Šioje pamokoje sukursite du „Vue“ komponentus: App.vue bendrai struktūrai ir Todo.vue, kad būtų rodomas užduočių sąrašas.

Užduočių komponento kūrimas

„Todo“ komponentui sukurkite naują failą, src/components/Todo.vue. Šis failas tvarkys užduočių sąrašo struktūrą.

Įklijuokite šį kodą į Todo.vue failas:

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

Aukščiau pateiktame kodo fragmente išsamiai aprašoma jo struktūra Daryti komponentas. Jis nustato komponentą priimti duomenis ir skleisti įvykius atitinkamai naudojant rekvizitus ir pasirinktinius įvykius.

Norėdami paaiškinti toliau, kodas naudojamas „Vue“ rekvizitai, skirti bendrauti tarp komponentų gauti todos masyvas iš pirminio komponento, App.vue. Tada jis naudoja v-for direktyva, skirta pateikti sąrašus iteruoti per gautą todos masyvą.

Kodas taip pat skleidžia pasirinktinį įvykį, pašalinti-todo, su naudingu kroviniu indeksas. Tai leidžia pašalinti tam tikrą užduotį su konkrečiu indeksu todos masyve.

Spustelėjus Pašalinti mygtuką, fragmentas suaktyvina pasirinktinio įvykio perdavimą pagrindiniam komponentui. Tai rodo, kad spustelėjote mygtuką, ragindami vykdyti atitinkamą funkciją, apibrėžtą pirminiame komponente App.vue.

Programos rodinio komponento kūrimas

Eikite į App.vue tęsti „Todo“ programos kūrimą. The Programėlė komponentas tvarkys naujų užduočių pridėjimą ir atvaizdavimą Daryti komponentas.

Įklijuokite toliau pateiktą informaciją scenarijus blokuoti į savo 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>

Aukščiau pateiktas kodo fragmentas apibūdina logiką App.vue komponentas. Fragmentas importuoja Daryti komponentą ir inicijuoja reaktyvius kintamuosius su „Vue Composition“ API.

Kodas prasideda importuojant Todo komponentą ir ref funkcija iš nurodyto kelio ir vue, atitinkamai.

Tada fragmentas inicijuoja reaktyviąją eilutę, newTodo, kad išsaugotumėte užduotį, kurią įvesite. Tai taip pat inicijuoja tuščią reaktyvųjį todos masyvas, turintis užduočių sąrašą.

The addTodo funkcija prideda naujų užduočių į todos masyvą. Jei newTodo nėra tuščias, patvirtinus jis įstumiamas į masyvą ir iš naujo nustato newTodo reikšmę, kad galėtumėte pridėti daugiau užduočių.

Funkcija addTodo taip pat iškviečia saveToLocalStorage, kuri išsaugo todos masyvą naršyklės LocalStorage. Fragmente naudojamas setItem metodą, kad tai pasiektų, ir prieš saugojimą konvertuoja todos masyvą į JSON eilutę.

Ji taip pat apibrėžia a pašalintiTodo funkcija, kuriai reikia a Raktas kaip parametras. Jis naudoja šį klavišą, kad pašalintų atitinkamą daryti iš todos masyvo. Pašalinus, funkcija removeTodo iškviečia saveToLocalStorage, kad atnaujintų LocalStorage duomenis.

Galiausiai kodas naudoja getItem „LocalStorage“ pasiekiamas metodas, leidžiantis gauti anksčiau išsaugotas užduotis naudojant „Todos“ klavišą. Jei išsaugojote užduotis naršyklės „LocalStorage“, kodas jas perkelia į „Todos“ masyvą.

Dabar sutvarkėte App.vue komponento logiką, įklijuokite šį kodą į šabloną „Vue“ programos blokas, kad sukurtumėte vartotojo sąsają:

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

Šablonas naudoja v-modelis, duomenų įrišimo Vue metodas susieti įvestą užduotį prie newTodo reaktyvioji eilutė. Šablonas taip pat naudoja v-ondirektyva dėl įvykių tvarkymo Vue per jo trumpinį (@).

Jis naudoja v-on, kad klausytų tiek spustelėkite ir įveskite pagrindiniai įvykiai, patvirtinantys naująjį Todo.

Galiausiai šablonas naudoja Daryti komponentas, kurį sukūrėte pirmiausia, kad pateiktumėte užduočių sąrašą. The :todos sintaksė praeina todos masyvas kaip Todo komponento atrama.

The @remove-todo sintaksė nustato įvykių klausytoją, kad užfiksuotų pasirinktinį įvykį, kurį išleido Todo komponentas, ir iškviestų pašalintiTodo funkcija atsakant.

Dabar užpildėte paraišką ir galite pasirinkti stilių pagal savo skonį. Galite peržiūrėti savo programą vykdydami šią komandą:

npm run dev

Turėtumėte pamatyti tokį ekraną:

Galite pridėti arba pašalinti užduotis programoje „Todo“. Be to, dėl LocalStorage integracijos galite atnaujinti programą arba visiškai iš jos išeiti; jūsų kuruojamas darbų sąrašas išliks nepakitęs.

„LocalStorage“ svarba

„LocalStorage“ integravimas į žiniatinklio programas yra būtinas tiek pradedantiesiems, tiek patyrusiems kūrėjams. „LocalStorage“ supažindina pradedantiesiems su duomenų išlikimu, leisdama saugoti ir nuskaityti vartotojų sukurtą turinį.

Vietinė saugykla yra svarbi, nes galite užtikrinti, kad jūsų naudotojo duomenys išliktų nepakitę skirtingų seansų metu. „LocalStorage“ pašalina nuolatinio serverio ryšio poreikį, todėl greitesnis įkėlimo laikas ir geresnis žiniatinklio programų reagavimas.