Jak zbudować aplikację Vue To-Do 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.

Integracja LocalStorage w aplikacjach Vue ułatwia zachowanie danych użytkownika podczas różnych sesji, umożliwiając przechowywanie list i mniejszych fragmentów informacji w celu zapewnienia ciągłości doświadczenia użytkownika.

Po ukończeniu tego samouczka, użytkownik będzie posiadał w pełni działającą aplikację Vue to-do, zdolną do dodawania i usuwania zadań przy jednoczesnym wykorzystaniu LocalStorage do przechowywania danych.

Konfiguracja aplikacji Vue To-Do

Upewnij się, że poprawnie zainstalowałeś zarówno Node, jak i NPM w swoim systemie komputerowym przed rozpoczęciem jakichkolwiek zadań programistycznych.

Aby utworzyć nowe przedsięwzięcie, wykonaj następującą instrukcję npm:

 npm create vue

Przed wygenerowaniem nowej aplikacji Vue wymagane jest wybranie predefiniowanej konfiguracji lub konfiguracji z listy dostępnych opcji w celu poprowadzenia procesu instalacji. Wybór ten zapewnia, że pożądane cechy i funkcjonalności są zawarte w projekcie zgodnie z określonymi preferencjami.

Nie ma potrzeby korzystania z dodatkowych funkcji w tej aplikacji do zarządzania zadaniami, dlatego rozsądnie byłoby wybrać “Nie” dla każdej z oferowanych opcji.

Po skonfigurowaniu i zainicjowaniu projektu można rozpocząć tworzenie narzędzia do zarządzania zadaniami, wykorzystując LocalStorage jako jego podstawę.

Tworzenie aplikacji To-Do

jedna obejmuje ogólny układ (App.vue), a druga wyświetla spis zadań (Todo.vue).

Tworzenie komponentu To-Do

W celu stworzenia komponentu Todo, konieczne jest utworzenie nowego pliku w katalogu “src/components” i oznaczenie go jako “Todo.vue”. Podstawową funkcją tego pliku będzie zarządzanie organizacją listy zadań.

php Moje Todos {{ todo.text }} Delete import { mapGetters } from ‘vue’export default {name: “Todo”,data() {return {todos: [] // initialize empty array of todos}},computed: {…mapGetters([’todos’]

 <!-- Todo.vue -->
<script setup>
const props = defineProps(['todos']);
const emit = defineEmits(['remove-todo']);

const removeTodo = (index) => {
  emit('remove-todo', index);
};
</script>

<template>
  <div class="todo-list">
    <ul>
      <li v-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>

Przedstawiony fragment kodu określa architekturę komponentu Todo. Wykorzystując rekwizyty do transmisji danych i wykorzystując niestandardowe zdarzenia do emisji zdarzeń, komponent ten ustanawia środki, za pomocą których może zarówno odbierać informacje, jak i wysyłać zdarzenia, ułatwiając w ten sposób płynną komunikację między jego różnymi elementami.

Kod wykorzystuje rekwizyty Vue jako środek komunikacji między komponentami w celu pobrania tablicy “todos” z jej komponentu nadrzędnego, App.vue. Dyrektywa “v-for” jest następnie wykorzystywana do iteracyjnego renderowania listy na podstawie pobranej tablicy todos.

Kod generuje unikalne zdarzenie, znane jako “remove-todo”, które zawiera powiązany ładunek o nazwie “index”. Wykorzystując to zdarzenie i odpowiadający mu ładunek, można skutecznie usunąć określony element z szerszej tablicy “todos” o określonej wartości liczbowej indeksu.

Po kliknięciu przycisku “Remove”, niestandardowe zdarzenie jest emitowane przez powiązany fragment, który propaguje się do komponentu nadrzędnego, oznaczając, że przycisk został użyty i inicjując wykonanie określonej funkcji znajdującej się w komponencie nadrzędnym, a mianowicie App.vue.

Tworzenie komponentu widoku aplikacji

Przejdź do pliku App.vue, aby dalej rozwijać aplikację To-Do. Komponent App jest odpowiedzialny za zarządzanie tworzeniem zadań i wyświetlanie komponentu To-Do na ekranie.

‘Welcome back!’,duration: 5000,position: ’top-right’,hideProgressBar: true,isAjax: false,afterClose: () => {// Navigate to home pagenavigate(’/home’)},})} else {console.log( Nieznany stan: ${store.value} )}})

 <!-- App.vue -->
<script setup>
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>

Wyżej wymieniony fragment kodu określa podstawowe przesłanki zawarte w komponencie App.vue, który obejmuje import i inicjalizację parametrów reaktywnych za pośrednictwem interfejsu API kompozycji Vue komponentu Todo.

Początkowy krok w procesie implementacji obejmuje zaimportowanie zarówno komponentu Todo, jak i funkcji referencyjnej, z których każda pochodzi z różnych źródeł - w szczególności komponent Todo jest uzyskiwany za pośrednictwem zaimportowanego modułu znajdującego się we wcześniej zdefiniowanej ścieżce, podczas gdy funkcja referencyjna pochodzi z samej biblioteki Vue.

Segment kodu ustanawia następnie responsywny identyfikator ciągu, określany jako “newTodo”, aby pomieścić zadanie, które zostanie wprowadzone. Dodatkowo ustawia pustą tablicę reaktywną o nazwie “todos”, która służy jako repozytorium dla listy zadań.

Funkcja addTodo służy do włączania nowych zadań do istniejącej listy todos . Pod warunkiem, że zmienna wejściowa newTodo zawiera wartość inną niż null, zostanie ona dołączona do tablicy po potwierdzeniu przez użytkownika, w konsekwencji resetując zawartość newTodo , aby umożliwić dalsze wprowadzanie zadań.

Funkcja addTodo nie tylko dodaje nowy element todo, ale także wywołuje funkcję saveToLocalStorage , która przechowuje zaktualizowaną tablicę todos w lokalnej pamięci przeglądarki przy użyciu metody setItem . Jednak przed zapisaniem tablica todos jest konwertowana na ciąg JSON w celu łatwiejszego przetwarzania podczas pobierania.

Implementacja removeTodo polega na przyjęciu określonego identyfikatora jako danych wejściowych, zwanego “kluczem”, który jest następnie wykorzystywany do usunięcia skorelowanego zadania ze zbioru zadań, znanego jako tablica “todos”. Po procesie usuwania, funkcja removeTodo wywołuje metodę saveToLocalStorage w celu aktualizacji przechowywanych danych w lokalnym systemie pamięci przeglądarki.

Wreszcie, program wykorzystuje funkcję getItem właściwą dla Local Storage, aby pobrać wcześniej zapisane zadania pod kluczem “todos”. Jeśli istnieją jakieś zadania zachowane w Local Storage przeglądarki, są one następnie dodawane do tablicy “todos”.

Powyższy kod jest szablonem interfejsu użytkownika aplikacji napisanej przy użyciu frameworka Vue. Zawiera element div o identyfikatorze “app”, który służy jako węzeł główny interfejsu użytkownika aplikacji i zawiera tytuł, formularz i przycisk. Element title wyświetla tekst pomiędzy dwoma elementami h1, podczas gdy elementy form i button nie są widoczne, ponieważ jeszcze nie istnieją.

 <!-- App.vue -->
<template>
  <div class="app">
    <h1>To do List</h1>
    <div class="add-todo">
      <input v-model="newTodo" @keyup.enter="addTodo"
        placeholder="Add a new task" class="todo-input" />

      <button @click="addTodo" class="add-button">Add</button>
    </div>
    <Todo :todos="todos" @remove-todo="removeTodo" />
  </div>
</template>

Szablon wykorzystuje dyrektywę v-model , która jest mechanizmem stosowanym w ramach Vue do ustanowienia dwukierunkowej relacji wiązania danych między elementem wejściowym a lokalną zmienną reaktywną lub właściwością znaną jako “newTodo”. Dodatkowo szablon wykorzystuje dyrektywę v-on , która służy jako środek do obsługi zdarzeń w ekosystemie Vue za pomocą zwięzłej notacji określanej jako " “, po której następuje symbol “@”, umożliwiając efektywne zarządzanie interakcjami użytkownika z aplikacją.

Komponent wykorzystuje dyrektywę v-on do monitorowania zarówno zdarzeń kliknięcia, jak i klawisza Enter w celu sprawdzenia poprawności nowo dodanego zadania.

Podsumowując, szablon wykorzystuje wcześniej zdefiniowany komponent Todo poprzez wykorzystanie znacznika . Umożliwia to renderowanie listy zadań poprzez dostarczenie tablicy todos jako argumentu do komponentu Todo za pomocą wspomnianej składni “:todos”.

Składnia @remove-todo ustanawia nasłuch dla niestandardowego zdarzenia, które jest emitowane przez komponent Todo , a po wykryciu tego zdarzenia wywołuje odpowiednio funkcję removeTodo .

Po zakończeniu tworzenia aplikacji użytkownik ma możliwość dostosowania jej wyglądu do swoich preferencji. Aby wyświetlić demonstrację swojej pracy, wystarczy wykonać podane polecenie.

 npm run dev

Powinieneś zobaczyć następujący ekran:

Aplikacja Todo zapewnia użytkownikom możliwość zarówno dodawania, jak i usuwania zadań według własnego uznania. Dodatkowo, funkcjonalność ta jest ulepszona poprzez płynną integrację z LocalStorage, co zapewnia, że nawet po odświeżeniu aplikacji lub jej całkowitym zamknięciu, wszystkie elementy zadań pozostają bezpiecznie przechowywane w celu późniejszego dostępu.

Znaczenie LocalStorage

Włączenie funkcji LocalStorage do platform internetowych ma istotne znaczenie zarówno dla nowicjuszy, jak i doświadczonych profesjonalistów, ponieważ zapewnia im zrozumienie przechowywania danych poprzez umożliwienie zachowania i wyszukiwania informacji utworzonych przez użytkownika.

Wykorzystanie LocalStorage okazuje się korzystne dzięki trwałemu przechowywaniu danych użytkownika podczas różnych sesji przeglądania, eliminując w ten sposób konieczność częstych interakcji z serwerem, co może skutkować zwiększoną wydajnością i zwiększoną responsywnością aplikacji internetowych poprzez skrócenie czasu ładowania.