DEV {JS}

Mode sombre

Étape 12 – Créer la page des favoris ​

🎯 Objectifs de l’étape ​

Dans cette étape, vous allez créer une page dédiée à l’affichage des Pokémon favoris.
Vous apprendrez à :

  • récupérer les favoris depuis le pokemonStore,
  • afficher dynamiquement les cartes PokemonCard des favoris,
  • gérer le cas où aucun favori n’est encore sélectionné.

📁 Étapes à suivre ​

1. Créer ou modifier le fichier src/pages/Favoris.vue ​

Ajoutez une structure similaire à celle de la page d’accueil avec :

  • un v-container pour le layout global,
  • un titre <h1> centré,
  • une grille (v-row / v-col) pour afficher les favoris.

2. Importer le store et le composant ​

vue
<script setup>
  import { usePokemonStore } from '@/stores/pokemonStore'
  import PokemonCard from '@/components/PokemonCard.vue'

  const pokemonStore = usePokemonStore()
</script>

🧩 Exemple complet de code ​

vue
<template>
  <v-container>
    <h1 class="mb-6 text-center">Mes Pokémons Favoris</h1>

    <v-row v-if="pokemonStore.getFavorites.length > 0">
      <v-col
          v-for="pokemon in pokemonStore.getFavorites"
          :key="pokemon.id"
          cols="12"
          lg="3"
          md="4"
          sm="6"
          xl="2"
      >
        <PokemonCard :pokemon="pokemon" />
      </v-col>
    </v-row>

    <v-alert
        v-else
        class="text-center mt-4"
        type="info"
    >
      Vous n'avez pas encore de Pokémon favoris.<br>
      <v-btn to="/">Retourner à la liste</v-btn>
    </v-alert>
  </v-container>
</template>

✅ Résultat attendu ​

  • La page /favoris affiche uniquement les Pokémon marqués comme favoris
  • Si aucun favori n’a été sélectionné, un message d’alerte s’affiche
  • Le composant PokemonCard est réutilisé

🧪 Tests à effectuer ​

  1. Ajouter un ou plusieurs Pokémon en favoris depuis la page d’accueil
  2. Naviguer vers /favoris
  3. Vérifier que les bons Pokémon sont affichés
  4. Retirer tous les favoris et observer le message conditionnel

📘 Documentation utile ​

💡 Astuce bonus ​

Ajoutez un compteur de favoris dans le menu ou le titre de la page :

vue
<h1 class="mb-6 text-center">
  Mes Pokémons Favoris ({{ favoris.length }})
</h1>