Jak zbudować aplikację Vue do wykonania przy użyciu LocalStorage

LocalStorage to internetowy interfejs API wbudowany w przeglądarki, który umożliwia aplikacjom internetowym przechowywanie par klucz-wartość na urządzeniu lokalnym. Zapewnia prostą metodę przechowywania danych, nawet po zamknięciu przeglądarki.

Możesz zintegrować LocalStorage z aplikacjami Vue, aby przechowywać listy i inne małe dane. Umożliwia to przechowywanie danych użytkownika w różnych sesjach aplikacji.

Po tym samouczku będziesz mieć funkcjonalną aplikację do wykonywania czynności Vue, która może dodawać i usuwać zadania, przechowując dane za pomocą LocalStorage.

Konfigurowanie aplikacji Vue To-Do

Zanim zaczniesz kodować, upewnij się, że tak zainstalowałeś Node i NPM na swoim urządzeniu.

Aby utworzyć nowy projekt, uruchom tę komendę npm:

npm create vue 

Polecenie będzie wymagało wybrania ustawienia wstępnego dla nowej aplikacji Vue przed utworzeniem i zainstalowaniem niezbędnych zależności.

Nie będziesz potrzebować dodatkowych funkcji dla tej aplikacji do zrobienia, więc wybierz „Nie” dla wszystkich dostępnych ustawień wstępnych.

Po skonfigurowaniu projektu możesz rozpocząć tworzenie aplikacji zadań do wykonania za pomocą LocalStorage.

Tworzenie aplikacji zadań do wykonania

Na potrzeby tego samouczka utworzysz dwa komponenty Vue: App.vue dla ogólnej struktury i Todo.vue do wyświetlania listy zadań.

Tworzenie komponentu zadań do wykonania

Dla komponentu Todo utwórz nowy plik, src/components/Todo.vue. Plik ten będzie obsługiwał strukturę listy zadań.

Wklej następujący kod do pliku Todo.vue plik:

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

Powyższy fragment kodu szczegółowo opisuje strukturę pliku Do zrobienia część. Konfiguruje komponent tak, aby odbierał dane i emitował zdarzenia za pomocą odpowiednio rekwizytów i niestandardowych zdarzeń.

Aby wyjaśnić dalej, kod wykorzystuje Rekwizyty Vue do komunikacji pomiędzy komponentami otrzymać rzeczy do zrobienia tablica z komponentu nadrzędnego, Aplikacja.vue. Następnie korzysta z dyrektywa v-for do renderowania list do iteracji po odebranej tablicy zadań do wykonania.

Kod emituje również niestandardowe zdarzenie, usuń-do zrobienia, z ładunkiem indeks. Pozwala to usunąć określone zadanie z określonym indeksem w tablicy todos.

Po kliknięciu Usunąć przycisk fragment kodu wyzwala emisję zdarzenia niestandardowego do komponentu nadrzędnego. Oznacza to, że kliknąłeś przycisk, co powoduje wykonanie odpowiedniej funkcji zdefiniowanej w komponencie nadrzędnym, App.vue.

Tworzenie komponentu widoku aplikacji

Udaj się do Aplikacja.vue aby kontynuować tworzenie aplikacji Todo. The Aplikacja Komponent zajmie się dodawaniem nowych zadań i renderowaniem Do zrobienia część.

Wklej poniższe scenariusz blok do pliku 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>

Powyższy fragment kodu przedstawia logikę pliku Aplikacja.vue część. Fragment importuje plik Do zrobienia komponent i inicjuje zmienne reaktywne za pomocą interfejsu API Vue Composition.

Kod zaczyna się od importu komponentu Todo i pliku ref funkcję z określonej ścieżki i vueodpowiednio.

Następnie fragment kodu inicjuje ciąg reaktywny, nowośćDo zrobienia, aby zapisać zadanie, które wprowadzisz. Inicjuje również pusty element reaktywny rzeczy do zrobienia tablica przechowująca listę zadań.

The dodajDo zrobienia funkcja dodaje nowe zadania do tablicy todo. Jeśli polecenie newTodo nie jest puste, po potwierdzeniu jest umieszczane w tablicy i resetuje wartość newTodo, aby umożliwić dodanie większej liczby zadań.

Funkcja addTodo wywołuje również metodę zapisz w pamięci lokalnej, który zapisuje tablicę todos w LocalStorage przeglądarki. Fragment wykorzystuje setItem metodę, aby to osiągnąć i przed zapisaniem konwertuje tablicę todos na ciąg JSON.

Definiuje także A usuńTodo funkcja, która przyjmuje a klucz jako parametr. Używa tego klucza do usunięcia odpowiedniego do zrobienia z tablicy todo. Po usunięciu funkcja RemoveTodo wywołuje funkcję saveToLocalStorage w celu aktualizacji danych LocalStorage.

Na koniec kod używa Zdobądź przedmiot metoda dostępna dla LocalStorage w celu pobrania wcześniej zapisanych zadań za pomocą klawisza todos. Jeśli zapisałeś zadania w LocalStorage przeglądarki, kod wypycha je do tablicy todos.

Teraz poradziłeś sobie z logiką komponentu App.vue, wklej następujący kod w pliku szablon blok aplikacji Vue, aby utworzyć interfejs użytkownika:

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

Szablon wykorzystuje model v, metoda wiązania danych w Vue aby powiązać wprowadzone zadanie z nowośćDo zrobienia ciąg reaktywny. Szablon korzysta również z v-włdyrektywa dotycząca obsługi zdarzeń w Vue poprzez swój skrót (@).

Używa v-on do słuchania obu plików Kliknij I Wchodzić kluczowe wydarzenia, aby potwierdzić noweTodo.

Na koniec szablon używa Do zrobienia komponent, który utworzyłeś jako pierwszy, aby wyrenderować listę rzeczy do zrobienia. The :wszystko składnia przechodzi rzeczy do zrobienia array jako rekwizyt komponentu Todo.

The @usuń-todo składnia konfiguruje detektor zdarzeń w celu przechwycenia niestandardowego zdarzenia wyemitowanego przez komponent Todo i wywołania metody usuńTodo działać w odpowiedzi.

Po ukończeniu aplikacji możesz nadać jej styl według własnego gustu. Możesz wyświetlić podgląd swojej aplikacji, uruchamiając to polecenie:

npm run dev

Powinieneś zobaczyć taki ekran:

Możesz dodawać lub usuwać zadania w aplikacji Todo. Co więcej, dzięki integracji LocalStorage możesz odświeżyć aplikację lub całkowicie z niej wyjść; Twoja wybrana lista rzeczy do zrobienia pozostanie nienaruszona.

Znaczenie LocalStorage

Integracja LocalStorage z aplikacjami internetowymi jest niezbędna zarówno początkującym, jak i doświadczonym programistom. LocalStorage wprowadza początkujących w problematykę trwałości danych, umożliwiając im przechowywanie i pobieranie treści generowanych przez użytkowników.

LocalStorage jest ważny, ponieważ możesz mieć pewność, że dane użytkownika pozostaną nienaruszone podczas różnych sesji. LocalStorage eliminuje potrzebę ciągłej komunikacji z serwerem, co prowadzi do szybszego ładowania i lepszej responsywności aplikacji internetowych.