Adieu Vuex, Bonjour Pinia

Vous souvenez-vous de nos galères avec Vuex ? Des mutations sans fin, une syntaxe commit et dispatch bizarre, et des types TypeScript qui devenaient un vrai casse-tête. Il semblerait que l'équipe Vue ait entendu nos prières et ait sorti Pinia. Ce n'est pas qu'une simple bibliothèque de gestion d'état, mais le successeur officiel de Vuex qui facilite considérablement la vie du développeur frontend.

Au fait, le nom est un jeu de mots amusant. Pinia ressemble au mot espagnol « piña » (ananas). Les créateurs comparent un store à un ananas : c'est un groupe de fleurs individuelles qui forment ensemble un seul fruit. Chaque store de votre application naît de manière autonome, mais au final ils fonctionnent comme une seule équipe.

Ce que c'est et pourquoi vous en avez besoin

En bref, Pinia est un store léger pour Vue qui supporte pleinement l'API de Composition. Il pèse seulement environ 1 Ko, supporte le rechargement à chaud des modules et s'intègre parfaitement avec les DevTools.

La principale différence avec l'ancienne approche est l'absence de mutations. Maintenant vous pouvez modifier l'état directement dans les actions, ce qui réduit considérablement la quantité de code répétitif. Si vous travaillez avec Vue 3, Pinia est la norme de facto. Pour ceux qui sont encore sur Vue 2, il y a une compatibilité ascendante, donc la migration ne sera pas un désastre.

Pourquoi les développeurs choisissent ce store

J'ai identifié plusieurs points qui changent vraiment le workflow.

Support TypeScript prêt à l'emploi

Avec Vuex, le typage ressemblait souvent à utiliser des béquilles. Avec Pinia, tout est différent. C'est écrit en TypeScript, donc l'autocomplétion fonctionne parfaitement. Vous n'avez pas besoin de décrire manuellement des interfaces pour chaque getter ou action — la bibliothèque détermine elle-même ce que vous retournez.

Modularité sans complexité supplémentaire

Oubliez les modules imbriqués et les chemins complexes vers eux. Avec Pinia, vous créez simplement différents stores dans différents fichiers et les importez où nécessaire. Cela rend l'architecture plus propre : chaque composant ne prend que les données dont il a réellement besoin.

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

Intégration simple

Vous pouvez connecter la bibliothèque avec seulement quelques lignes de code. C'est agréable qu'elle fonctionne parfaitement avec Nuxt et supporte le rendu côté serveur (SSR).

import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)

Comment ça marche en pratique

Imaginez que vous avez un panier dans une boutique en ligne. Avant, vous deviez enregistrer un module, suivre la nomenclature des chemins et écrire des actions qui appellent des mutations. Avec Pinia, vous appelez simplement la méthode du store dans un composant comme une fonction ordinaire.

Pour récupérer des données sans perdre la réactivité, il y a le helper pratique storeToRefs. Cela vous sauve quand vous avez besoin de déstructurer un store sans casser sa connexion à l'état.

import { useCartStore } from '@/stores/cart'
import { storeToRefs } from 'pinia'

const cart = useCartStore()
const { items, total } = storeToRefs(cart)

Est-ce que ça vaut le coup de migrer

Si vous démarrez un nouveau projet Vue 3, il n'y a practically aucune alternative à Pinia. C'est plus simple, plus rapide et plus moderne. Si vous avez un ancien projet Vuex, il n'y a pas besoin de se précipiter, mais pour les nouvelles fonctionnalités je recommanderais d'essayer cette approche.

Le projet est activement maintenu par Eduardo San Martin Morote (posva), qui fait partie de l'équipe cœur de Vue. Cela donne confiance que la bibliothèque ne disparaîtra pas dans un mois. De plus, Pinia a une excellente documentation et une communauté active.

Vous pouvez essayer le projet en action sur StackBlitz :

• Démo avec Vue 3
• Démo avec Nuxt 3

Pour qui c'est définitivement :

1. Ceux qui sont fatigués de la verbosité de Vuex.
2. Les fans de TypeScript qui apprécient une autocomplétion de qualité.
3. Les développeurs Nuxt 3, où Pinia est la solution recommandée.

Peut-être le seul inconvenient — si vous êtes habitué à la structure rigide de Vuex avec des mutations obligatoires, la liberté de Pinia pourrait sembler étrange au début. Mais on s'habitue vite aux bonnes choses.