DEV {JS}

Mode sombre

Étape 19 – Charger les Pokémon dpeuis l'API ​

🎯 Objectifs ​

  • Modifier le magasin pokemonStore.js pour récupérer les Pokémon depuis l’API avec Axios
  • Retourner un résultat { success, message } comme dans addPokemon()
  • Gérer l’affichage de l’erreur directement dans App.vue sans stocker l’erreur dans le state

🛠️ 1. Modifier le magasin pokemonStore.js ​

a) Importer Axios ​

En haut du fichier :

js
import axios from 'axios' // Librairie pour les requêtes HTTP

b) Modifier l’état initial du store ​

Dans state, remplacez :

js
pokemons: JSON.parse(localStorage.getItem('pokemons')) || defaultPokemons,

par :

js
pokemons: [], // Pokémon chargés dynamiquement depuis l'API

c) Créer l’action fetchPokemons ​

js
async fetchPokemons () {
  try {
    // Appel GET vers l’API
    const response = await axios.get('http://localhost:3535/pokemons')
    // On remplace le tableau de Pokémon par celui de l’API
    this.pokemons = response.data
    // On retourne un objet de succès
    return { success: true }
  } catch (error) {
    // En cas d’erreur, on affiche le message d’erreur dans la console
    console.error('Erreur API :', error)
    // On retourne un objet d’erreur avec le message
    return {
      success: false,
      message: "Impossible de charger les Pokémon depuis l’API."
    }
  }
}

💡 2. Appeler fetchPokemons() et loadFavorites() dans App.vue ​

Dans App.vue, utilisez le bloc onMounted() pour lancer les appels, et affichez un message en cas d’échec :

vue
<script setup>
import { ref, onMounted } from 'vue'
import { usePokemonStore } from '@/stores/pokemonStore'

const pokemonStore = usePokemonStore()
const messageErreur = ref('')

// Une fois le composant monté, on lance la récupération des Pokémon
// et le chargement des favoris
onMounted(async () => {
  // On appelle l'action fetchPokemons() du store
  const result = await pokemonStore.fetchPokemons()
  // Si l'appel échoue, on affiche un message d'erreur
  if (!result.success) {
    messageErreur.value = result.message
  }
  // On recharge les favoris
  pokemonStore.loadFavorites()
})
</script>

💬 Et dans le template : ​

vue
<v-alert
  v-if="messageErreur"
  type="error"
  class="mb-6"
>
  {{ messageErreur }}
</v-alert>

✅ Résultat attendu ​

  • Les Pokémon sont récupérés depuis l’API
  • Les favoris sont rechargés
  • En cas d’erreur, un message s’affiche sans avoir besoin de le stocker dans le store

🧪 Tests à effectuer ​

  1. Démarrez l’API
  2. Rechargez la page → les Pokémon doivent apparaître
  3. Vérifiez que les favoris sont bien rechargés
  4. Coupez l’API → rechargez la page → un message d’erreur s’affiche

📘 Documentation utile ​