Ako vytvoriť aplikáciu Vue To-Do s LocalStorage

LocalStorage je webové rozhranie API zabudované do prehliadačov, ktoré umožňuje webovým aplikáciám ukladať páry kľúč – hodnota na vašom lokálnom zariadení. Poskytuje jednoduchý spôsob ukladania údajov aj po zatvorení prehliadača.

LocalStorage môžete integrovať so svojimi aplikáciami Vue na ukladanie zoznamov a iných malých údajov. To vám umožňuje uchovávať údaje používateľov v rôznych reláciách aplikácie.

Po tomto tutoriále budete mať funkčnú aplikáciu Vue to-do, ktorá môže pridávať a odstraňovať úlohy a ukladať údaje pomocou LocalStorage.

Nastavenie aplikácie Vue To-Do

Skôr ako začnete kódovať, uistite sa, že máte nainštalovaný Node a NPM na vašom zariadení.

Ak chcete vytvoriť nový projekt, spustite tento príkaz npm:

npm create vue 

Príkaz bude vyžadovať, aby ste pred vytvorením a inštaláciou potrebných závislostí vybrali predvoľbu pre vašu novú aplikáciu Vue.

Pre túto aplikáciu nebudete potrebovať ďalšie funkcie, takže pre všetky dostupné predvoľby vyberte „Nie“.

Po nastavení projektu môžete začať vytvárať aplikáciu úloh s LocalStorage.

Vytvorenie aplikácie To-Do

Pre tento tutoriál vytvoríte dva komponenty Vue: App.vue pre celkovú štruktúru a Todo.vue na zobrazenie zoznamu úloh.

Vytvorenie komponentu To-Do

Pre komponent Todo vytvorte nový súbor, src/components/Todo.vue. Tento súbor bude spracovávať štruktúru zoznamu úloh.

Vložte nasledujúci kód do Todo.vue súbor:

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

Vyššie uvedený útržok kódu podrobne popisuje štruktúru súboru Robiť komponent. Nastavuje komponent tak, aby prijímal údaje a vysielal udalosti pomocou rekvizít a vlastných udalostí.

Na vysvetlenie ďalej kód používa Vue rekvizity na komunikáciu medzi komponentmi prijať todos pole z jeho nadradeného komponentu, App.vue. Potom použije Direktíva v-for pre vykresľovanie zoznamov iterovať cez prijaté pole úloh.

Kód tiež vydáva vlastnú udalosť, remove-todo, s užitočným zaťažením index. To vám umožňuje odstrániť konkrétnu úlohu so špecifickým indexom v poli todos.

Po kliknutí na Odstrániť úryvok spustí prenos vlastnej udalosti do nadradeného komponentu. To znamená, že ste klikli na tlačidlo, čím sa spustí príslušná funkcia definovaná v nadradenom komponente App.vue.

Vytvorenie komponentu zobrazenia aplikácie

Zamierte k App.vue pokračovať v budovaní aplikácie Todo. The App komponent sa postará o pridávanie nových úloh a vykresľovanie Robiť komponent.

Prilepte nasledujúce skript zablokovať do súboru App.vue:

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

Vyššie uvedený útržok kódu načrtáva logiku App.vue komponent. Útržok importuje súbor Robiť komponent a inicializuje reaktívne premenné pomocou Vue Composition API.

Kód začína importom komponentu Todo a ref funkciu zo zadanej cesty a vue, resp.

Útržok potom inicializuje reaktívny reťazec, newTodo, na uloženie úlohy, ktorú zadáte. Tiež inicializuje prázdnu reaktivitu todos pole so zoznamom úloh.

The addTodo funkcia pridáva nové úlohy do poľa todos. Ak newTodo nie je prázdne, pri potvrdení sa vloží do poľa a resetuje hodnotu newTodo, aby ste mohli pridať ďalšie úlohy.

Funkcia addTodo tiež vyvolá saveToLocalStorage, ktorý uloží pole úloh do LocalStorage prehliadača. Útržok používa setItem na dosiahnutie tohto cieľa a pred uložením skonvertuje pole todos na reťazec JSON.

Definuje tiež a removeTodo funkcia, ktorá zaberá a kľúč ako parameter. Tento kľúč používa na odstránenie príslušného robiť z poľa todos. Po odstránení funkcia removeTodo zavolá saveToLocalStorage na aktualizáciu údajov LocalStorage.

Nakoniec kód používa getItem metóda dostupná pre LocalStorage na načítanie predtým uložených úloh pomocou kľúča úloh. Ak ste úlohy uložili do LocalStorage prehliadača, kód ich vloží do poľa úloh.

Teraz ste zvládli logiku komponentu App.vue, vložte nasledujúci kód do šablóna blok vašej aplikácie Vue na vytvorenie používateľského rozhrania:

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

Šablóna používa v-model, spôsob viazania údajov vo Vue naviazať zadané úlohy na newTodo reaktívny reťazec. Šablóna tiež používa v-onsmernica pre vybavovanie udalostí vo Vue cez svoju skratku (@).

Používa v-on na počúvanie oboch kliknite a vstúpiť kľúčové udalosti na potvrdenie newTodo.

Nakoniec šablóna používa Robiť komponent, ktorý ste vytvorili ako prvý na vykreslenie zoznamu úloh. The :todos syntax prechádza todos pole ako rekvizita pre komponent Todo.

The @remove-todo syntax nastaví poslucháč udalostí na zachytenie vlastnej udalosti, ktorú komponent Todo emitoval, a zavolal ju removeTodo funkcia v reakcii.

Teraz ste dokončili aplikáciu, môžete si vybrať štýl podľa svojho vkusu. Ukážku aplikácie si môžete pozrieť spustením tohto príkazu:

npm run dev

Mali by ste vidieť takúto obrazovku:

V aplikácii Todo môžete pridávať alebo odstraňovať úlohy. A čo viac, vďaka integrácii LocalStorage môžete aplikáciu obnoviť alebo ju úplne ukončiť; váš zoznam úloh zostane nedotknutý.

Význam LocalStorage

Integrácia LocalStorage do webových aplikácií je nevyhnutná pre začínajúcich aj skúsených vývojárov. LocalStorage predstavuje začiatočníkom perzistenciu údajov tým, že im umožňuje ukladať a získavať obsah vytvorený používateľmi.

LocalStorage je dôležité, pretože môžete zabezpečiť, aby vaše používateľské údaje zostali neporušené počas rôznych relácií. LocalStorage eliminuje potrebu neustálej komunikácie so serverom, čo vedie k rýchlejšej dobe načítania a lepšej odozve webových aplikácií.