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).

Exemple dans le Pokédex

Voici plusieurs actions utiles dans le fichier pokemonStore.js :

actions: {
  toggleFavorite(pokemon) {
    const index = this.favorites.indexOf(pokemon.id)
    if (index === -1) {
      this.favorites.push(pokemon.id)
    } else {
      this.favorites.splice(index, 1)
    }
  },

  addPokemon(pokemon) {
    this.pokemons.push(pokemon)
  },

  deletePokemon(id) {
    this.pokemons = this.pokemons.filter(p => p.id !== id)
    this.favorites = this.favorites.filter(fid => fid !== id)
  }
}

• toggleFavorite(pokemon) ajoute ou retire un Pokémon des favoris.
• addPokemon(pokemon) ajoute un nouveau Pokémon à la liste.
• deletePokemon(id) supprime un Pokémon, et enlève aussi son ID des favoris.

Utilisation dans un composant

Dans un composant Vue :

const pokemonStore = usePokemonStore()

pokemonStore.toggleFavorite(pokemon)

Les actions sont directement appelables sur le store.
Si besoin, elles peuvent aussi être asynchrones :

async fetchPokemonsFromApi() {
  const response = await axios.get('/api/pokemons')
  this.pokemons = response.data
}

Bonnes pratiques

• Toujours utiliser des actions pour modifier les données (ne pas le faire directement dans les composants).
• Les noms doivent être clairs : add, update, delete, toggle, etc.
• Regrouper la logique métier dans les actions pour garder des composants simples.

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