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

À faire (étapes)

Exercice formatif noté.

Étape 0

Étape 1

  1. Faites l'installation de Pinia dans le projet existant
  2. Assurez-vous que main.ts est bien configuré!

Étape 2

  1. Créer un dossier stores avec un store qui sera nommé todo.ts
  2. Faites les importations de vue et de pinia
  3. Faites une interface pour les todos 
    // Interface pour les objets Todo
interface Todo {
id: number
text: string
done: boolean
}
  4. 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: 
          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 { ... }
  5. 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

Remise