Actions — Modifier les données

Les actions sont des fonctions définies dans un store Pinia pour modifier les données du state.

Contrairement aux getters, elles peuvent être asynchrones, contenir de la logique, et déclencher des effets secondaires (comme des appels API ou des sauvegardes dans le localStorage).

Dans les actions, on accède au state avec this (pas .value).

Actions asynchrones — Charger des données

L’utilisation la plus courante : appeler une API et stocker le résultat.

actions: {
  async fetchPokemons() {
    const response = await fetch(‘http://localhost:3535/pokemons’)
    if (!response.ok) {
      throw new Error(`Erreur HTTP : ${response.status}`)
    }
    this.pokemons = await response.json()
  },

  async fetchTypes() {
    const response = await fetch(‘http://localhost:3535/types’)
    if (!response.ok) {
      throw new Error(`Erreur HTTP : ${response.status}`)
    }
    this.types = await response.json()
  },
}

this dans les actions (syntaxe Options)

Dans les actions Pinia avec la syntaxe Options, on accède au state avec this :

this.pokemons = data   // ✅ Correct
this.isLoading = true  // ✅ Correct

C’est différent de la Composition API dans les composants, où on utilise .value.

Action d’initialisation — init()

Pour charger plusieurs ressources au démarrage, on crée une action init() qui orchestre les appels en parallèle avec Promise.all :

async init() {
  this.isLoading = true
  this.error = null
  try {
    await Promise.all([
      this.fetchPokemons(),
      this.fetchTypes(),
    ])
  } catch (error) {
    this.error = ‘Erreur lors du chargement des données’
    console.error(error)
  } finally {
    this.isLoading = false
  }
}

Pourquoi init() gère isLoading et pas les actions individuelles ? Si chaque action gérait isLoading, il passerait à false dès que la première requête termine — alors que la deuxième est encore en cours.

On appelle init() une seule fois dans App.vue :

import { usePokemonStore } from ‘@/stores/pokemonStore’

onMounted(async () => {
  const pokemonStore = usePokemonStore()
  await pokemonStore.init()
})

Utilisation dans un composant

Les actions sont directement appelables sur le store :

const pokemonStore = usePokemonStore()
pokemonStore.fetchPokemons()

Bonnes pratiques

• Toujours utiliser des actions pour modifier les données (ne pas le faire directement dans les composants).
• Les noms doivent être clairs : fetch, add, update, delete, toggle.
• Regrouper la logique métier dans les actions pour garder des composants simples.
• Gérer les 3 états d’un appel API : loading, error, data.

Plus tard — les actions pour les favoris

Dans une séquence ultérieure, on ajoutera des actions comme toggleFavorite(), addPokemon() et deletePokemon(). Le principe reste identique.

👉 Vous êtes maintenant prêt à utiliser Pinia dans l’ensemble de votre application.