Cours 19 - Store avec Pinia

Objectifs

• Comprendre les fondamentaux de Pinia dans le contexte de Vue.js
• Être capable de configurer et d'utiliser Pinia pour gérer l'état global d'une application Vue.js
• Maîtriser les concepts de stores, états, actions, et getters dans Pinia

Déroulement

• Introduction au cours
• Atelier 19 - Gestion de l'état avec Pinia
• Exercice 19 - Création et utilisation d'un store
• Conclusion

Introduction à la gestion de l'état

• Imaginons un centre commercial avec différents magasins, chacun ayant son propre inventaire, ses employés, et ses politiques de fonctionnement.
• Pour un client, l'expérience d'achat est fluide, même s'il passe d'un magasin à l'autre. Derrière cette expérience, il y a une organisation complexe et bien gérée.
• Dans le développement d'applications, Pinia agit comme ce centre commercial pour Vue.js, en fournissant un moyen organisé et efficace de gérer l'état global de l'application.

La gestion de l'état est cruciale dans les applications complexes, car elle permet de partager des données entre différents composants, de façon réactive et centralisée. Pinia, le magasin d'état officiel pour Vue.js, offre une solution élégante et simple pour cette tâche.

Pourquoi un store est-il important ?

1. Centralisation de l'état : Un store permet de centraliser l'état de votre application, rendant le partage de données entre composants facile et efficace.
2. Débogage facilité : Avec un état centralisé, suivre les changements d'état et déboguer devient plus simple.
3. Maintenabilité : La structure organisée d'un store aide à maintenir une base de code propre et compréhensible, surtout dans les grandes applications.
4. Performances optimisées : Les stores utilisent efficacement la réactivité de Vue.js, assurant une performance optimale même avec un grand nombre de composants.

Et Pinia dans tout ça ?

Pinia est conçu spécifiquement pour Vue.js 3, tirant parti de sa Composition API pour offrir une expérience de gestion d'état intégrée et réactive. Il simplifie le partage d'état entre composants, tout en restant léger et performant.

Avec Pinia, vous pouvez facilement définir des stores, qui sont des conteneurs d'état global, et y accéder dans vos composants Vue. Les stores de Pinia peuvent contenir des états, des actions (fonctions pour modifier l'état), et des getters (fonctions calculées basées sur l'état).

Atelier 19 - Gestion de l'état avec Pinia

Prérequis

Vidéo de présentation

Introduction To Pinia | Vue 3
Pour d'autres vidéos, un peu de recherche

À lire et consulter

Documentation officielle de Pinia
Pinia offre une approche intuitive et puissante pour gérer l'état global dans les applications Vue.js.

Une nouvelle extension de navigateur à installer

Pour Chrome & Edge (chromium) https://devtools.vuejs.org/guide/browser-extension
Pour Firefox: https://addons.mozilla.org/en-CA/firefox/addon/vue-js-devtools

Vidéo de l'atelier 19

Au besoin, voici la vidéo de l'atelier 19

Installation de Pinia

Pour intégrer Pinia dans votre projet Vue.js, suivez le guide officiel:
https://pinia.vuejs.org/getting-started.html

À partir de zéro

Commande NPM

npm create vue@latest

Questions à répondre:

• Nom du projet: pinia-demo
• Sélectionner TypeScript
• Ajouter Pinia pour la gestion de l'état
• Le reste à Non

Faites les commandes à l'écran

cd pinia-demo
npm install
npm run dev

package.json
Vérifiez l'ajout de Pinia dans votre fichier package.json pour confirmer l'intégration.

À partir d'un projet existant

Pour ajouter Pinia à un projet Vue.js existant:

Commandes NPM

npm install pinia

Ajoutez Pinia à votre application en modifiant le fichier main.ts:

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

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.mount('#app')

Utilisation de Pinia

Avec Pinia configuré, explorons son utilisation à travers un exemple simple :

1. Créez un store Pinia pour gérer l'état d'un compteur.
2. Utilisez ce store dans un composant Vue pour afficher et modifier le compteur.

Définition d'un store

// stores/counter.ts
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

Utilisation dans un composant

<script setup lang="ts">
import { useCounterStore } from '../stores/counter'

const counter = useCounterStore()
</script>

<template>
  <div>
    <p>Compteur: {{ counter.count }}</p>
    <button @click="counter.increment">Incrémenter</button>
  </div>
</template>

Exercice 19

Exercice 19 à faire et à remettre