Exercice 25 - Utilisation de Pinia
Table des matières
Mise en situation
Vous avez compris le pourquoi et la raison d'être de Pinia, maintenant il est temps de le mettre en pratique avec un exercice pratique!
Modalités
- Exercice en équipe de deux
- Réaliser durant le cours
- Remettre le tout sur Léa dans Exercice 25 pour le prochain cours.
À faire (étapes)
Exercice formatif noté.
Étape 0
- Prenez le temps de lire l'atelier 25 du cours 25
- À partir des fichiers de l'exercice 25 fourni, faites les prochaines étapes.
exer25.zip
Étape 1
- Faites l'installation de Pinia dans le projet existant
- Assurez-vous que main.ts est bien configuré!
Étape 2
- Créer un dossier stores avec un store qui sera nommé todo.ts
- Faites les importations de vue et de pinia
- Faites une interface pour les todos
// Interface pour les objets Todo
interface Todo {
id: number;
text: string;
done: boolean;
}- Dans votre store, faites:
- L'utilisation d'un state qui contient les todos (ref)
const todos = ref<Todo[]>([]);- L'utilisation de 4 getters (computed)
Les todos terminées doneTodos
Le décompte des todos todosCount
Le décompte des todos terminés doneTodosCount
EXPERT: Obtenir un todo par son id getTodoById - 2 fonctions (actions)
Ajouter un todo addToTodos
Pour gérer les ids voici un exemple:
typescript const newId = todos.value.length === 0 ? 1 : Math.max(...todos.value.map(todo => todo.id)) + 1
Par défaut il n'est pas complété (done à false)
Inverser la liste des todos invertTodos - Faites le retour (return) de toutes les informations nécessaires
// Retour des propriétés du store
return { ... }- Dans todoList.vue, faite l'utilisation du store pour:
- Obtenir la liste de todos
- Inverser la liste de todos sur le clique
- Ajouter un todo au store
- Faites les autres modifcations pour utiliser le store (exemple le nombre de tâches)
- Vous aurez à modifier le template pour que ça fonctionne avec le nouveau type:
<TodoItem v-for="todo in todos" :key="todo.id" :todo="todo.text" />
NOTE: les autres composants peuvent rester tel quel l'utilisation des emits et des popos est encore valide
Mode Expert : Défi Pinia avancé (environ 30 min)
Défi expert : Vous avez terminé l'exercice? Il est temps de travailler sans filet. Vous avez les concepts, maintenant débrouillez-vous!
Défi 1 : Persistance des données
Problème : Rechargez votre page : toutes vos todos disparaissent. Ce n'est pas acceptable pour une vraie application.
Votre mission : Faites en sorte que les todos survivent au rechargement de page en utilisant le package pinia-plugin-persistedstate.
- Installez le package
- Configurez-le dans
main.ts - Activez la persistance dans votre store
Validation : Ajoutez 3 todos, rechargez la page (F5), les todos sont encore là.
Défi 2 : Filtrage des todos
Problème : Quand la liste est longue, on veut pouvoir se concentrer sur ce qui reste à faire.
Votre mission : Ajoutez dans l'interface trois boutons Tous / Actifs / Terminés qui filtrent la liste affichée.
Contrainte importante : toute la logique de filtrage doit rester dans le store, pas dans le composant.
Indice : Pensez à un getter computed qui dépend d'un ref représentant le filtre actif.
Validation : Cliquer sur « Actifs » n'affiche que les todos non complétées, « Terminés » n'affiche que celles cochées, « Tous » reaffiche tout.
Défi 3 : Second store
Problème : Un store qui fait trop de choses devient difficile à maintenir. Les statistiques n'ont pas leur place dans todo.ts.
Votre mission : Créez un second store stats.ts qui calcule et expose :
- Le pourcentage de complétion (ex:
75%) - Le nombre de tâches restantes
- Le nombre total de tâches
Ce store doit importer et utiliser le store todo : il ne doit pas dupliquer les données.
Affichez ces statistiques dans un nouveau composant StatsPanel.vue intégré dans l'application. Incluez une barre de progression HTML (<progress>) et un message de félicitations lorsque tout est complété.
Validation : Cocher une todo met à jour la barre de progression immédiatement.
Remise
- Sur Léa dans Exercice 25 pour la date prévue
- Quand c'est terminé montrez le moi