Vue.js - Pinia

Pinia 🍍pinia.vuejs.org

C'est quoi Pinia ?

Pinia est un gestionnaire d'état (« state management pattern ») et une bibliothèque pour des applications Vue.js.

Il sert de zone de stockage de données centralisée pour tous les composants dans une application, avec des règles pour s'assurer que l'état ne puisse subir de mutation que d'une manière prévisible.

Il s'intègre également avec Vue DevTools et permet de visualiser l'évolution des données dans le temps.

Tous les composants de votre application peuvent accéder facilement au magasin !

Sans Pinia

Sans Pinia, les composants échangent uniquement entre père et fils.

Le schéma ci-après représente le découpage en composants d'une application de gestion des tâches.

• Chaque rectangle bleu représente un composant.

• Les flèches représentent le sens de transmission des informations entre les composants

  • Père vers le fils avec des propriétés : prop

  • Fils vers le père avec des évènements : event

1. TodoPage transmets les tâches à TasksCompleted et TasksTodo via les props.

2. Pour supprimer une tâche, le composant Delete va émettre un évènement qui sera retransmis par Task puis TasksCompleted pour enfin être entendu par TodoPage qui supprimera la tâche.

3. TodoPage transmettra ensuite la liste des tâches modifiées à TasksCompleted et TasksTodo .

Toute cette gymnastique prend du temps lors de la création de l'application et ne facilite pas sa maintenance.

Avec Pinia

Tout devient plus simple avec un magasin :

1. TasksCompleted et TasksTodo récupèrent les tâches en utilisant un getter du magasin.

2. Delete exectue l'action "suppression d'une tâche", via une action du magasin.

3. Les données de tous les composants sont mises à jour instantanément.

Comment ça marche ?

Au cœur de chaque application, magasin, Pinia, il y a la zone de stockage : "store".

Le store stocke l'état : "state", des données de votre application.

Il y a deux choses qui différencient un store Pinia d'un simple objet global :

1. Les stores sont réactifs : dès que le state est modifié, tous les composants l'intégrant sont mis à jour.

2. On ne peut pas modifier directement le state. On est obligé de le faire en effectuant une action. Cela garantit la persistance des données et la traçabilité des opérations, comme le fait un moteur de base de données.

En résumé

• Store : magasin Pinia

• State : données du magasin

• Actions : méthodes permettant de modifier les données du magasin.

Exemple d'un store

main.ts

import { createPinia } from 'pinia';
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).use(createPinia()).mount('#app');

store.ts

App.vue

Accesseurs : getters

Les accesseurs, getters, sont l'équivalent des propriétés calculées mais au niveau du magasin.

Donc si on a besoin de récupérer des données calculées, triées, filtrées ou formatées dans plusieurs composants, on le fera à un seul endroit en créant un getters dans le magasin.

import { ref, comptued } from "vue";
import { defineStore } from "pinia";

const useStore = defineStore('store', () => {
  const taches = ref([ 
    { id: 1, text: 'pain', terminee: true },
    { id: 2, text: 'fromage', terminee: false }
  ]);

  const tachesTerminees = computed(() =>
    taches.value.filter(tache => tache.terminee);
  );

  return { taches, tachesTerminees };
});

Les accesseurs seront exposés sur l'objet store et vous accèderez aux valeurs comme des propriétés :

store.tachesTerminees // -> [{ id: 1, text: 'pain', terminee: true }]

Actions asynchrones

Une action peut être autant synchrone qu'asynchrone. Il suffit de le définir dans la fonction passée, comme n'importe quelle autre méthode.

import { defineStore } from "pinia";
import { ref } from "vue";

const useStore = defineStore("store", () => {
  const count = ref(0);
  const increment = async () => count++;
  
  return { count, increment};
});