DEV {JS}

Mode sombre

Étape 11 – Ajouter un système de favoris ​

🎯 Objectifs de l’étape ​

Dans cette étape, vous allez permettre à l’utilisateur de marquer un Pokémon comme favori.
Chaque carte affichera une icône en forme de cœur ❤️ sur laquelle on peut cliquer pour ajouter ou retirer un favori.

Vous apprendrez à :

  • utiliser une icône Vuetify conditionnelle,
  • manipuler des données via Pinia (toggleFavorite),
  • afficher l’état favori d’un Pokémon (plein ou vide),
  • ajouter une animation CSS au changement d’état,
  • charger automatiquement les favoris au démarrage de l’application.

📁 Étapes à suivre ​

1. Modifier PokemonCard.vue ​

Dans le composant PokemonCard.vue, ajoutez un bouton en haut à droite de la carte pour gérer les favoris.

Ajoutez d’abord l’import du store :

js
import {usePokemonStore} from '@/stores/pokemonStore'

const pokemonStore = usePokemonStore()

Puis ajoutez le bouton dans la carte :

vue

<v-btn
    icon
    variant="plain"
    class="position-absolute top-0 right-0 mt-2 mr-2"
    @click.prevent="pokemonStore.toggleFavorite(pokemon)"
>
  <v-icon :color="pokemonStore.isFavorite(pokemon) ? 'red' : ''">
    {{ pokemonStore.isFavorite(pokemon) ? 'mdi-heart' : 'mdi-heart-outline' }}
  </v-icon>
</v-btn>

2. Charger les favoris au démarrage ​

L'action toggleFavorite qui permet d’ajouter ou de retirer un Pokémon des favoris sauvegarde automatiquement les favoris dans le localStorage afin de les conserver même après un redémarrage du navigateur.

Problème : les favoris ne sont pas chargés au démarrage de l’application et donc si vous rafraîchissez la page, vous perdrez les favoris.

Pour corriger cela, vous devez appeler la méthode loadFavorites() du store pokemonStore au démarrage de l’application.

Le meilleur endroit pour le faire est dans le composant App.vue qui est le composant racine de l’application.

Dans App.vue, ajoutez l’appel à pokemonStore.loadFavorites() dans le bloc <script setup> :

vue

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

  const pokemonStore = usePokemonStore()

  onMounted(() => {
    pokemonStore.loadFavorites()
  })
</script>

🔄 Fonctionnement du système de favoris ​

Le store pokemonStore fournit déjà plusieurs fonctions prêtes à l’emploi :

FonctionRôle
toggleFavorite(pokemon)ajoute ou retire un Pokémon des favoris
isFavorite(pokemon)retourne true si le Pokémon est favori
loadFavorites()charge les favoris depuis le localStorage

Ces fonctions permettent une persistance des favoris même après redémarrage du navigateur.

✅ Résultat attendu ​

  • Un cœur vide (🤍) s’affiche sur les cartes non favorites
  • Un cœur rouge (❤️) s’affiche si le Pokémon est marqué comme favori
  • Le clic sur l’icône ajoute ou retire un favori en temps réel
  • Les favoris sont sauvegardés et restaurés automatiquement

🧪 Test à effectuer ​

  1. Cliquez sur plusieurs icônes de cœur
  2. Rafraîchissez la page
  3. Vérifiez que l’état des favoris est conservé

📘 Documentation utile ​

💡 Astuces bonus ​

  • Vous pouvez ajouter une animation CSS au changement d’état du cœur
  • Changez la position du bouton avec des classes utilitaires comme absolute, top, right, etc.