Jak vytvořit aplikaci Vue To-Do s LocalStorage

LocalStorage je webové rozhraní API zabudované do prohlížečů, které umožňuje webovým aplikacím ukládat páry klíč–hodnota na vašem místním zařízení. Poskytuje jednoduchý způsob ukládání dat, a to i po zavření prohlížeče.

LocalStorage můžete integrovat se svými aplikacemi Vue a ukládat seznamy a další malá data. To vám umožní udržovat uživatelská data v různých relacích aplikace.

Po tomto tutoriálu budete mít funkční aplikaci Vue to-do, která může přidávat a odebírat úkoly a ukládat data pomocí LocalStorage.

Nastavení aplikace Vue To-Do

Než začnete kódovat, ujistěte se, že máte nainstalovaný Node a NPM na vašem zařízení.

Chcete-li vytvořit nový projekt, spusťte tento příkaz npm:

npm create vue 

Příkaz bude vyžadovat, abyste před vytvořením a instalací potřebných závislostí vybrali předvolbu pro vaši novou aplikaci Vue.

Pro tuto aplikaci s úkoly nebudete potřebovat další funkce, takže pro všechny dostupné předvolby vyberte „Ne“.

Po nastavení projektu můžete začít budovat aplikaci úkolů s LocalStorage.

Vytvoření aplikace To-Do

Pro tento tutoriál vytvoříte dvě komponenty Vue: App.vue pro celkovou strukturu a Todo.vue pro zobrazení seznamu úkolů.

Vytvoření komponenty To-Do

Pro komponentu Todo vytvořte nový soubor, src/components/Todo.vue. Tento soubor bude spravovat strukturu seznamu úkolů.

Vložte následující kód do Todo.vue soubor:

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

Výše uvedený fragment kódu podrobně popisuje strukturu souboru Dělat komponent. Nastavuje komponentu tak, aby přijímala data a vydávala události pomocí rekvizit a vlastních událostí.

Abychom dále vysvětlili, kód používá Vue rekvizity pro komunikaci mezi komponentami získat todos pole z jeho nadřazené komponenty, App.vue. Poté používá direktiva v-for pro vykreslování seznamů iterovat přijatým polem todos.

Kód také vysílá vlastní událost, odstranit-todo, s užitečným zatížením index. To vám umožní odstranit konkrétní úlohu s určitým indexem v poli todos.

Po kliknutí na Odstranit úryvek spustí vysílání vlastní události do nadřazené komponenty. To znamená, že jste klepli na tlačítko, které vyzve ke spuštění odpovídající funkce definované v nadřazené komponentě App.vue.

Vytvoření komponenty zobrazení aplikace

Zamiřte k App.vue pokračovat ve vytváření aplikace Todo. The Aplikace komponenta se postará o přidávání nových úloh a vykreslování Dělat komponent.

Vložte následující skript zablokovat do souboru 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>

Výše uvedený fragment kódu nastiňuje logiku App.vue komponent. Úryvek importuje soubor Dělat komponentu a inicializuje reaktivní proměnné pomocí Vue Composition API.

Kód začíná importem komponenty Todo a ref funkce ze zadané cesty a vue, resp.

Fragment pak inicializuje reaktivní řetězec, newTodo, pro uložení úkolu, který zadáte. Také inicializuje prázdnou reaktivitu todos pole se seznamem úkolů.

The addTodo funkce přidává nové úkoly do pole todos. Pokud není newTodo prázdné, je při potvrzení vloženo do pole a resetuje hodnotu newTodo, abyste mohli přidávat další úkoly.

Funkce addTodo také vyvolá saveToLocalStorage, který uloží pole todos do LocalStorage prohlížeče. Úryvek používá setItem k dosažení tohoto cíle a před uložením převede pole todos na řetězec JSON.

Definuje také a removeTodo funkce, která trvá a klíč jako parametr. Pomocí tohoto klíče odstraní odpovídající dělat z pole todos. Po odstranění funkce removeTodo zavolá saveToLocalStorage, aby aktualizovala data LocalStorage.

Nakonec kód používá getItem metoda dostupná pro LocalStorage pro načtení dříve uložených úkolů pomocí klíče úkolů. Pokud máte úkoly uložené v LocalStorage prohlížeče, kód je vloží do pole úkolů.

Nyní jste zvládli logiku komponenty App.vue, vložte následující kód do šablona blok vaší aplikace Vue k vytvoření uživatelského rozhraní:

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

Šablona používá v-model, metoda vazby dat ve Vue svázat zadaný úkol s newTodo reaktivní řetězec. Šablona také používá v-onsměrnice pro zpracování událostí ve Vue přes svou zkratku (@).

Používá v-on k poslechu obou klikněte a vstoupit klíčové události pro potvrzení newTodo.

Nakonec šablona používá Dělat komponent, který jste vytvořili jako první, abyste vykreslili seznam úkolů. The :todos syntaxe předává todos pole jako podpěra ke komponentě Todo.

The @remove-todo syntaxe nastaví posluchač události, aby zachytil vlastní událost, kterou komponenta Todo vyslala, a zavolal ji removeTodo funkce v reakci.

Nyní jste dokončili aplikaci, můžete si vybrat styl podle svého vkusu. Náhled aplikace můžete zobrazit spuštěním tohoto příkazu:

npm run dev

Měli byste vidět takovou obrazovku:

V aplikaci Todo můžete přidávat nebo odebírat úkoly. A co víc, díky integraci LocalStorage můžete obnovit aplikaci nebo ji úplně ukončit; váš seznam úkolů zůstane nedotčen.

Význam LocalStorage

Integrace LocalStorage do webových aplikací je nezbytná pro začínající i zkušené vývojáře. LocalStorage seznamuje začátečníky s perzistencí dat tím, že jim umožňuje ukládat a získávat obsah vytvořený uživateli.

LocalStorage je důležité, protože můžete zajistit, že vaše uživatelská data zůstanou v různých relacích nedotčená. LocalStorage eliminuje potřebu neustálé komunikace se serverem, což vede k rychlejšímu načítání a lepší odezvy webových aplikací.