Le framework Vue pour JavaScript est devenu populaire pour la construction d’interfaces utilisateur et d’applications à page unique (SPA). Pour garantir le fonctionnement optimal de vos grandes applications, vous devez maîtriser la gestion des états, c’est-à-dire le processus de gestion et de centralisation des données réactives d’une application (état) entre plusieurs composants.

Dans Vue, la gestion des états s’est longtemps appuyée sur Vuex, une bibliothèque proposant un stockage centralisé pour tous les composants d’une application. Cependant, de récentes avancées dans l’écosystème Vue ont donné naissance au successeur de Vuex, Pinia.

Pinia offre une approche de gestion plus légère, modulaire et intuitive. Il s’intègre de manière transparente au système de réactivité et à l’API de composition de Vue, ce qui permet aux développeurs de gérer et d’accéder facilement à l’état partagé de manière évolutive et facile à maintenir.

Plantons le décor : Pinia vs Vuex

En tant que bibliothèque de référence pour la gestion de l’état dans les applications Vue, Vuex fournissait un stockage centralisé pour tous les composants d’une application. Cependant, avec l’évolution de Vue, Pinia représente une solution plus moderne. Voyons en quoi elle diffère de Vuex.

  • Différences d’API – L’API de composition de Pinia offre une API plus fondamentale et plus intuitive que Vuex, ce qui rend la gestion de l’état de l’application plus simple. De plus, sa structure ressemble beaucoup à l’API Options de Vue, familière à la plupart des développeurs Vue.
  • Prise en charge des types – Historiquement, de nombreux développeurs Vue se sont heurtés à la prise en charge limitée des types de Vuex. En revanche, Pinia est une bibliothèque de gestion d’état entièrement typée qui élimine ces problèmes. La sécurité des types permet d’éviter les erreurs d’exécution potentielles, contribue à la lisibilité du code et facilite les capacités de mise à l’échelle.
  • Système de réactivité – Les deux bibliothèques exploitent le système de réactivité de Vue, mais l’approche de Pinia s’aligne plus étroitement sur l’API de composition de Vue 3. Bien que l’API de réactivité soit puissante, la gestion d’états complexes dans de grandes applications peut s’avérer difficile. Heureusement, l’architecture simple et flexible de Pinia facilite la gestion des états dans vos applications Vue 3. Le modèle de stockage de Pinia vous permet de définir un stockage pour gérer une partie spécifique de l’état de l’application, en simplifiant son organisation et en le partageant entre les composants.
  • Légèreté – Avec seulement 1 Ko, Pinia s’intègre parfaitement à votre environnement de développement, et sa légèreté peut améliorer les performances et les temps de chargement de votre application.

Comment configurer un projet Vue avec Pinia

Pour intégrer Pinia dans un projet Vue, initialisez votre projet avec Vue CLI ou Vite. Après l’initialisation du projet, vous pouvez installer Pinia via npm ou yarn en tant que dépendance.

  1. Créez un nouveau projet Vue à l’aide de Vue CLI ou Vite. Ensuite, suivez les instructions pour configurer votre projet. 
    // Using Vue CLI
vue create my-vue-ap
// Using Vite
npm create vite@latest my-vue-app -- --template vue
  2. Changez votre répertoire pour le dossier du projet nouvellement créé : 
    cd my-vue-app
  3. Installez Pinia comme dépendance dans votre projet. 
    // Using npm
npm install pinia
// Using yarn
yarn add pinia
  4. Dans votre fichier d’entrée principal (habituellement main.js ou main.ts), importez Pinia et dites à Vue de l’utiliser : 
    import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);

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

    Une fois Pinia installé et configuré dans votre projet Vue, vous êtes prêt à définir et à utiliser des stockages pour la gestion des états.

Comment créer un stockage dans Pinia

Le stockage est l’épine dorsale de la gestion des états dans votre application Vue alimentée par Pinia. Il vous aide à gérer les données de l’application de manière cohérente et coordonnée. Le stockage est l’endroit où vous définissez, stockez et gérez les données à partager entre les différents composants de votre application.

Cette centralisation est essentielle, car elle structure et organise les changements d’état de votre application, rendant le flux de données plus prévisible et plus facile à déboguer.

De plus, un stockage dans Pinia ne se contente pas de contenir l’état : Les fonctionnalités incluses dans Pinia vous permettent de mettre à jour l’état via des actions et de calculer des états dérivés via des getters. Ces capacités intégrées contribuent à une base de code plus efficace et plus facile à maintenir.

L’exemple suivant illustre la création d’un magasin Pinia de base dans le fichier src/store.js d’un projet.

import { defineStore } from 'pinia';
export const useStore = defineStore('main', {
    state: () => ({
        count: 0,
    }),
    actions: {
        increment() {
            this.count++;
        },
    },
    getters: {
        doubleCount: (state) => state.count * 2,
    },
});

Comment accéder à l’état du stockage dans les composants

Par rapport à Vuex, l’approche de Pinia en matière d’accès et de gestion de l’état est plus intuitive, surtout si vous êtes familier avec l’API de composition de Vue 3. Cette API est un ensemble de plusieurs qui permettent l’inclusion d’une logique réactive et composable dans vos composants.

Considérez le code suivant.

<template>
	<div>{{ store.count }}</div>
</template>

<script>>
import { useStore } from './store';

export default {
	setup() {
	const store = useStore();
		return { store };
	},
}
</script>

Dans l’extrait ci-dessus, la balise <template> contient le balisage HTML défini de votre composant. Pour afficher la valeur de la propriété count du stockage Pinia, vous utilisez la syntaxe de liaison de données de Vue, exprimée sous la forme {{ count }}.

La fonction useStore permet d’accéder au stockage Pinia, vous l’importez donc de store.js à l’aide de import { useStore } from './store';.

Caractéristique de l’API de composition de Vue 3, la fonction setup définit l’état réactif et la logique de votre composant. Dans la fonction, vous appelez ensuite useStore() pour accéder au stockage Pinia.

Ensuite, const count = store.count accède à la propriété count du stockage et la rend disponible dans le composant.

Enfin, setup renvoie count, ce qui permet au modèle d’effectuer le rendu. Le système de réactivité de Vue signifie que le modèle de votre composant mettra à jour la valeur de count chaque fois qu’elle changera dans le stockage.

Vous trouverez ci-dessous une capture d’écran de la sortie.

Capture d'écran du modèle Pinia Store Demo chargé dans un navigateur.
Capture d’écran du modèle Pinia Store Demo chargé dans un navigateur.

Cet exemple illustre les avantages de Pinia :

  • Simplicité – Pinia permet un accès direct à l’état du stockage sans fonctions de mapping. En revanche, Vuex a besoin de mapState (ou d’aides similaires) pour obtenir le même accès.
  • Accès direct au magasin – Pinia vous permet d’accéder directement aux propriétés de l’état (comme store.count), ce qui rend votre code plus lisible et compréhensible. Pendant ce temps, Vuex nécessite souvent des getters pour accéder aux propriétés les plus fondamentales, ce qui ajoute de la complexité et diminue la lisibilité.
  • Compatibilité avec l’API de composition – Comme le montre la méthode d’installation, l’intégration de Pinia avec l’API de composition s’aligne particulièrement bien avec le développement moderne de Vue, offrant une expérience de codage plus uniforme.

Comment modifier l’état avec Pinia

Dans Pinia, vous modifiez l’état d’un stockage à l’aide d’actions, qui sont plus flexibles que les mutations Vuex. Considérez l’appel de fonction suivant, qui incrémente la propriété count de l’état :

store.increment(); // Increments the count

En revanche, l’équivalent Vuex implique la définition d’une mutation en plus d’au moins une action :

mutations: {
	increment(state) {
	state.count++;
	},
},
actions: {
	increment({ commit }) {
	commit('increment');
	},
}

L’action Pinia et son code Vuex équivalent illustrent une différence cruciale entre la complexité du code des bibliothèques. Explorons ces différences plus en détail :

  • Mutation d’état directe ou indirecte – Comme le montre l’action increment, les actions Pinia modifient directement l’état du stockage. Dans Vuex, vous ne pouvez modifier l’état qu’à l’aide de mutations, que vous devez valider avec des actions. Cette séparation des processus garantit la traçabilité de vos changements d’état, mais elle est plus complexe et plus rigide que les actions Pinia comparables.
  • Opérations asynchrones et synchrones – Alors que les mutations Vuex sont toujours synchrones et ne peuvent pas contenir de processus asynchrones, les actions Pinia peuvent contenir du code synchrone et asynchrone. Par conséquent, vous pouvez effectuer des appels API ou d’autres opérations asynchrones directement dans les actions, ce qui permet d’alléger la base de code et de la rendre plus concise.
  • Syntaxe simplifiée – Vuex nécessite souvent de définir des mutations et d’appeler des actions pour les valider. Pinia supprime ce besoin. La possibilité de muter l’état à l’intérieur des actions réduit le code standard et rend votre code existant plus simple. Dans Vuex, les mises à jour d’état de base nécessitent la définition d’une action et d’une mutation, même si l’action ne fait que valider la mutation.

La transition de Vuex à Pinia

La transition vers Pinia peut apporter de nombreux avantages en termes de simplicité, de flexibilité et de maintenabilité, mais elle nécessite une planification et une réflexion approfondies pour garantir une mise en œuvre réussie.

Avant de passer à Pinia, assurez-vous que

  1. Vous familiariser avec les différences entre l’architecture de Pinia et celle de Vuex, les modèles de gestion des états et les API. Il est essentiel de comprendre ces différences pour remanier efficacement votre code et tirer pleinement parti des fonctionnalités de Pinia.
  2. Analysez et remaniez votre état Vuex, vos actions, vos mutations et vos getters pour les adapter à la structure de Pinia. N’oubliez pas que dans Pinia, vous définissez l’état comme une fonction. Vous pouvez directement muter les états avec des actions et implémenter des getters plus facilement.
  3. Planifiez la transition de vos modules de stockage Vuex. Pinia n’utilise pas les modules de la même manière que Vuex, mais vous pouvez toujours structurer vos stockages pour servir des objectifs similaires.
  4. Tirez parti de la prise en charge améliorée de TypeScript par Pinia. Si votre projet utilise TypeScript, considérez les capacités améliorées d’inférence de type et de typage de Pinia pour une meilleure sécurité de type et une meilleure expérience pour le développeur.
  5. Révisez vos stratégies de test pour tenir compte des changements dans la gestion des états. Ce processus peut impliquer une mise à jour de la façon dont vous simulez les stockages ou les actions dans vos tests unitaires et d’intégration.
  6. Réfléchissez à la manière dont la transition affecte la structure et l’organisation de votre projet. Tenez compte de facteurs tels que les conventions de dénomination et la manière dont vous importez et utilisez les stockages entre les composants.
  7. Assurez-vous de la compatibilité avec les autres bibliothèques. Vérifiez les mises à jour nécessaires ou les changements de dépendances que la transition pourrait affecter.
  8. Évaluez les éventuels changements de performance. Pinia est généralement plus léger que Vuex, mais continuez à surveiller les performances de votre application pendant et après la transition pour vous assurer qu’il n’y a pas de problèmes.

La conversion d’un magasin de Vuex à Pinia implique plusieurs étapes pour tenir compte des différences de structures et d’API. Prenons l’exemple du stockage Pinia présenté plus haut.

Le même stockage dans un fichier Vuex store.js se présente comme suit.

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        count: 0,
    },
    mutations: {
        increment(state) {
            state.count++;
        },
    },
    actions: {
        increment(context) {
            context.commit('increment');
        },
    },
    getters: {
        doubleCount(state) {
            return state.count * 2;
        },
    },
});

Comme pour le stockage Pinia précédent, cet exemple Vuex contient un objet state avec une seule propriété count initialisée à 0.

L’objet mutations contient des méthodes pour modifier directement l’état, tandis que les méthodes de l’objet actions engagent la mutation increment.

Ensuite, l’objet getters contient la méthode doubleCount, qui multiplie l’état count par 2 et renvoie le résultat.

Comme le montre ce code, l’implémentation d’un stockage dans Pinia implique plusieurs différences notables par rapport à Vuex :

  • Initialisation – Pinia ne nécessite pas Vue.use().
  • Structure – Dans Pinia, l’état est une fonction renvoyant un objet, ce qui permet une meilleure prise en charge de TypeScript et une plus grande réactivité.
  • Actions – Dans Pinia, les actions sont des méthodes qui modifient directement l’état sans avoir besoin de mutations, ce qui simplifie le code.
  • Getters – Bien que similaires à Vuex, les Getters dans Pinia sont définis à l’intérieur de la définition du magasin et peuvent accéder directement à l’état.

Comment utiliser le stockage dans les composants

Avec Vuex, vous pouvez utiliser le stockage comme suit :

<template>
	<div>{{ doubleCount }}</div>
	<button @click="increment">Increment</button>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
	computed: {
	...mapGetters(['doubleCount']),
	},
	methods: {
	...mapActions(['increment']),
	},
};
</script>

Pour Pinia, l’utilisation devient :

<template>
	<div>{{ store.doubleCount }}</div>
	<button> @click="store.increment">Increment</button>
</template>

<script>>
import { useStore } from '/src/store';

export default {
	setup() {
	const store = useStore();
	return {
		store,
	};
	},
};
</script>
Les conversions du stopckage Pinia.
Les conversions du stopckage Pinia.

Cet exemple couvre une conversion de base. Pour les stockages Vuex plus complexes, en particulier ceux qui utilisent des modules, la conversion impliquera une restructuration plus détaillée pour s’aligner sur l’architecture de Pinia.

Comment déployer votre application Vue

Avant de procéder au déploiement, inscrivez-vous à un essai gratuit du service d’hébergement d’applications de Kinsta. Vous allez déployer l’application à l’aide d’un fichier Docker.

Créez un fichier Docker à la racine de votre projet et collez-y le contenu suivant :

FROM node:latest
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY ./ .
CMD ["npm", "run", "start"]

Ce code indique au moteur Docker de Kinsta d’installer Node.js (FROM node:latest), de créer le répertoire de travail (WORKDIR /app), d’installer les modules node à partir du fichier package.json (RUN npm install) et de définir la commande start (CMD ["npm", "run", "start"]) qui sera invoquée au démarrage de l’application Vue. Les commandes COPY copient les fichiers ou répertoires spécifiés dans le répertoire de travail.

Ensuite, poussez votre code vers un fournisseur Git préféré (Bitbucket, GitHub ou GitLab). Une fois que votre répertoire est prêt, suivez les étapes suivantes pour déployer votre application sur Kinsta :

  1. Connectez-vous ou créez un compte pour afficher votre tableau de bord MyKinsta.
  2. Autorisez Kinsta avec votre fournisseur Git.
  3. Sélectionnez Application dans la colonne latérale de gauche et cliquez sur le bouton Ajouter une application.
  4. Dans la fenêtre modale qui s’affiche, choisissez le dépôt que vous souhaitez déployer. Si vous avez plusieurs branches, vous pouvez sélectionner la branche souhaitée et donner un nom à votre application.
  5. Sélectionnez l’un des emplacements de centre de données disponibles.
  6. Choisissez votre environnement de construction et sélectionnez Utiliser Dockerfile pour configurer l’image du conteneur.
  7. Si votre fichier Docker ne se trouve pas à la racine de votre répertoire, utilisez Contexte pour indiquer son chemin et cliquez sur Continuer.
  8. Vous pouvez laisser l’entrée de la commande Start vide. Kinsta utilise npm start pour démarrer votre application.
  9. Sélectionnez la taille du pod et le nombre d’instances qui conviennent le mieux à votre application et cliquez sur Continuer.
  10. Remplissez les informations relatives à votre carte bancaire et cliquez sur Créer une application.

Comme alternative à l’hébergement d’applications, vous pouvez opter pour le déploiement de votre application Vue en tant que site statique grâce à l’hébergement gratuit de sites statiques de Kinsta.

Résumé

Le passage de Vuex à Pinia marque une évolution significative dans la gestion des états au sein de l’écosystème Vue. La simplicité de Pinia, la prise en charge améliorée de TypeScript et l’alignement avec l’API Composition de Vue 3 en font un choix convaincant pour les applications Vue modernes.

Lorsque vous êtes prêt à héberger votre application Vue avec Kinsta, vous pouvez accéder à une infrastructure rapide, sécurisée et fiable. Inscrivez-vous à Kinsta et utilisez notre service d’hébergement d’applications.

Jeremy Holcombe Kinsta

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).