Getters — Accès intelligent aux données

Les getters sont des propriétés calculées du store. Ils permettent de lire ou filtrer les données du state de manière réactive.

Ils fonctionnent exactement comme computed() dans un composant : le résultat est recalculé automatiquement quand le state change.

Getter simple

Un getter reçoit le state en paramètre et retourne une valeur :

getters: {
  totalPokemons: (state) => state.pokemons.length,
}

Dans un composant, on l’utilise comme une propriété (sans parenthèses) :

const pokemonStore = usePokemonStore()
console.log(pokemonStore.totalPokemons)  // ex: 151

<p>{{ pokemonStore.totalPokemons }} Pokémon</p>

Getter avec paramètre

Pour retrouver un élément par son ID, on a besoin d’un paramètre. Le getter retourne alors une fonction :

getters: {
  getPokemonById: (state) => {
    return (pokemonId) => {
      return state.pokemons.find(p => p.id === pokemonId)
    }
  },
}

Dans un composant, on l’appelle comme une fonction :

const pokemon = pokemonStore.getPokemonById(‘pikachu-25’)

Dans la page de détail, on l’utilise avec computed() pour qu’il se mette à jour si l’ID change :

const route = useRoute()
const pokemon = computed(() => {
  return pokemonStore.getPokemonById(route.params.id)
})

Getter simple vs getter avec paramètre

• Sans paramètre → retourne directement une valeur : totalPokemons
• Avec paramètre → retourne une fonction : getPokemonById(id)

C’est la différence la plus importante à comprendre pour l’examen oral.

Exemple complet dans le Pokédex

getters: {
  // Nombre total de Pokémon
  totalPokemons: (state) => state.pokemons.length,

  // Retrouver un Pokémon par son ID (getter avec paramètre)
  getPokemonById: (state) => {
    return (pokemonId) => state.pokemons.find(p => p.id === pokemonId)
  },
}

Plus tard — les getters pour les favoris

Dans une séquence ultérieure, on ajoutera des getters comme isFavorite(pokemon) et getFavorites pour gérer les favoris. La syntaxe sera identique.

👉 Lire le chapitre 6 – Actions