Comment créer une application Vue To-Do avec LocalStorage

LocalStorage est une API Web, intégrée aux navigateurs, qui permet aux applications Web de stocker des paires clé-valeur sur votre appareil local. Il fournit une méthode simple pour stocker des données, même après avoir fermé votre navigateur.

Vous pouvez intégrer LocalStorage à vos applications Vue pour stocker des listes et d'autres données de petite taille. Cela vous permet de conserver les données utilisateur sur différentes sessions d'application.

Après ce didacticiel, vous disposerez d'une application de tâches Vue fonctionnelle qui peut ajouter et supprimer des tâches, en stockant les données à l'aide de LocalStorage.

Configuration de l'application Vue To-Do

Avant de commencer à coder, assurez-vous d'avoir installé Node et NPM sur votre appareil.

Pour créer un nouveau projet, exécutez cette commande npm :

npm create vue 

La commande vous demandera de sélectionner un préréglage pour votre nouvelle application Vue avant de créer et d'installer les dépendances nécessaires.

Vous n'aurez pas besoin de fonctionnalités supplémentaires pour cette application de tâches, alors choisissez « Non » pour tous les préréglages disponibles.

Une fois le projet configuré, vous pouvez commencer à créer l'application de tâches avec LocalStorage.

Création de l'application de tâches

Pour ce tutoriel, vous allez créer deux composants Vue: App.vue pour la structure globale et Todo.vue pour afficher une liste de tâches.

Création du composant To-Do

Pour le composant Todo, créez un nouveau fichier, src/components/Todo.vue. Ce fichier gérera la structure de la liste des tâches.

Collez le code suivant dans le Tout.vue déposer:

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

L'extrait de code ci-dessus détaille la structure du Faire composant. Il configure le composant pour qu'il reçoive des données et émette des événements via l'utilisation d'accessoires et d'événements personnalisés, respectivement.

Pour expliquer davantage, le code utilise Accessoires Vue pour communiquer entre les composants recevoir le toutes les choses tableau à partir de son composant parent, App.vue. Il utilise ensuite le Directive v-for pour le rendu des listes pour parcourir le tableau todos reçu.

Le code émet également un événement personnalisé, supprimer-tâche, avec une charge utile indice. Cela vous permet de supprimer une tâche particulière avec un index spécifique dans le tableau todos.

En cliquant sur le Retirer, l'extrait déclenche l'émission de l'événement personnalisé vers le composant parent. Cela indique que vous avez cliqué sur le bouton, invitant à l'exécution de la fonction correspondante définie dans le composant parent, App.vue.

Création du composant View de l'application

Rendez-vous sur App.vue pour continuer à créer l'application Todo. Le Application Le composant gérera l'ajout de nouvelles tâches et le rendu du Faire composant.

Collez ce qui suit scénario bloquez dans votre fichier 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>

L'extrait de code ci-dessus décrit la logique du App.vue composant. L'extrait importe le Faire composant et initialise les variables réactives avec l'API Vue Composition.

Le code commence par l'import du composant Todo et le réf fonction à partir du chemin spécifié et vue, respectivement.

L'extrait initialise ensuite une chaîne réactive, nouveauTodo, pour stocker la tâche que vous entrerez. Il initialise également un réactif vide toutes les choses tableau, contenant la liste des tâches.

Le ajouterTodo La fonction ajoute de nouvelles tâches au tableau todos. Si newTodo n'est pas vide, il est placé dans le tableau lors de la confirmation et réinitialise la valeur newTodo pour vous permettre d'ajouter plus de tâches.

La fonction addTodo appelle également le enregistrer dans le stockage local, qui enregistre le tableau todos dans le LocalStorage du navigateur. L'extrait utilise le setItem pour y parvenir et convertit le tableau todos en chaîne JSON avant le stockage.

Il définit également un supprimerTodo fonction qui prend un clé comme paramètre. Il utilise cette clé pour supprimer le correspondant faire du tableau todos. Après la suppression, la fonction removeTodo appelle saveToLocalStorage pour mettre à jour les données LocalStorage.

Enfin, le code utilise le obtenir l'article méthode disponible pour LocalStorage pour récupérer les tâches précédemment enregistrées avec la clé todos. Si vous avez enregistré des tâches dans LocalStorage du navigateur, le code les place dans le tableau todos.

Maintenant que vous avez géré la logique du composant App.vue, collez le code suivant dans le modèle bloc de votre application Vue pour créer l'interface utilisateur :

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

Le modèle utilise modèle en V, une méthode de liaison de données dans Vue pour lier la tâche saisie à la nouveauTodo chaîne réactive. Le modèle utilise également le v-ondirective pour gérer les événements dans Vue grâce à son raccourci (@).

Il utilise v-on pour écouter à la fois le Cliquez sur et entrer événements clés pour confirmer le nouveau Todo.

Enfin, le modèle utilise le Faire composant que vous avez créé en premier pour afficher la liste des tâches. Le :toutes les choses la syntaxe passe le toutes les choses array comme accessoire du composant Todo.

Le @remove-todo La syntaxe configure un écouteur d'événement pour capturer l'événement personnalisé émis par le composant Todo et appeler le supprimerTodo fonctionner en réponse.

Maintenant que vous avez terminé l'application, vous pouvez choisir de la styliser à votre goût. Vous pouvez prévisualiser votre application en exécutant cette commande :

npm run dev

Vous devriez voir un écran comme celui-ci :

Vous pouvez ajouter ou supprimer des tâches dans l'application Todo. De plus, grâce à l'intégration de LocalStorage, vous pouvez actualiser l'application ou la quitter complètement; votre liste de tâches organisée restera intacte.

Importance du stockage local

L'intégration de LocalStorage dans les applications Web est essentielle pour les développeurs novices et expérimentés. LocalStorage initie les débutants à la persistance des données en leur permettant de stocker et de récupérer le contenu généré par l'utilisateur.

LocalStorage est important car vous pouvez garantir que vos données utilisateur restent intactes au cours des différentes sessions. LocalStorage élimine le besoin d'une communication constante avec le serveur, ce qui entraîne des temps de chargement plus rapides et une réactivité améliorée des applications Web.