Pinia avec Vue : guide complet

Pourquoi Pinia avec Vue : guide complet ?

Contexte réel : pourquoi un dev a besoin de ça au quotidien

Pinia est un outil de gestion d'état pour Vue qui est conçu pour être plus simple et plus performant que Vuex. Dans un environnement de développement moderne, où les applications JavaScript de plus en plus complexes nécessitent une gestion efficace des états globaux, Pinia offre une solution intuitive et facile à utiliser.

Un cas d'utilisation concret pourrait être le développement d'une application e-commerce. Vous aurez besoin de gérer l'état de l'authentification des utilisateurs, les informations du panier, la liste des produits disponibles, etc. Avec Pinia, vous pouvez organiser ces états de manière modulaire et accéder facilement à partir de n'importe quel composant Vue.

Prerequis

• Connaissance avancée de Vue.js (Vue 3 recommandé)
• Familiarité avec les concepts de composants réactifs
• Maîtrise des bases du JavaScript ES6+

Outils à installer :

• Node.js et npm (https://nodejs.org/)
• Vue CLI (npx @vue/cli install)

Concepts fondamentaux

1. Installation et configuration de Pinia

Pinia peut être facilement ajouté à un projet Vue existant en utilisant npm.

npm install pinia

Ensuite, vous devez ajouter Pinia au store du projet dans votre main.js ou main.ts :

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

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

2. Création d'un store Pinia

Un store est la source unique de vérité pour les états globaux dans Pinia.

// stores/user.js
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    name: '',
    email: ''
  }),
  actions: {
    setName(name) {
      this.name = name;
    },
    setEmail(email) {
      this.email = email;
    }
  }
});

3. Utilisation d'un store dans un composant

Vous pouvez accéder au store depuis n'importe quel composant en utilisant useStore.

<template>
  <div>
    <h1>User Information</h1>
    <p>Name: user.name</p>
    <p>Email: user.email</p>
    <button @click="updateName">Update Name</button>
  </div>
</template>

<script setup>
import { useUserStore } from '../stores/user';

const user = useUserStore();

const updateName = () => {
  user.setName('John Doe');
};
</script>

4. Getters

Les getters sont des fonctions qui permettent de calculer les états en fonction d'autres états.

// stores/counter.js
import { defineStore } from 'pinia';

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

5. Modules

Pour gérer de grands projets, vous pouvez organiser les stores en modules.

// stores/index.js
import { createPinia } from 'pinia';
import userStore from './user';
import counterStore from './counter';

const pinia = createPinia();
pinia.use(userStore);
pinia.use(counterStore);

export default pinia;

Mise en pratique : projet fil rouge

Étape 1 : Création du projet

Créez un nouveau projet Vue avec Vue CLI.

npm init vue@latest
cd mon-projet
npm install

Étape 2 : Configuration de Pinia

Ajoutez Pinia au store dans votre main.js :

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

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

Étape 3 : Création d'un store pour le todo list

Créez un nouveau fichier store/todo.js :

// stores/todo.js
import { defineStore } from 'pinia';

export const useTodoStore = defineStore('todo', {
  state: () => ({
    todos: []
  }),
  actions: {
    addTodo(todo) {
      this.todos.push(todo);
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    }
  }
});

Étape 4 : Utilisation du store dans le composant TodoList

Créez un nouveau composant TodoList.vue :

<template>
  <div>
    <h1>Todo List</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo">
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        todo
        <button @click="removeTodo(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useTodoStore } from '../stores/todo';

const newTodo = ref('');
const todoStore = useTodoStore();

const addTodo = () => {
  if (newTodo.value.trim()) {
    todoStore.addTodo(newTodo.value);
    newTodo.value = '';
  }
};

const removeTodo = (index) => {
  todoStore.removeTodo(index);
};
</script>

Étape 5 : Intégration du composant dans App.vue

Ajoutez le composant TodoList à votre application principale :

<template>
  <div id="app">
    <TodoList />
  </div>
</template>

<script setup>
import TodoList from './components/TodoList.vue';
</script>

Erreurs fréquentes et debugging

Erreur 1 : "TypeError: Cannot read property 'state' of undefined"

Cette erreur peut survenir si le store n'est pas correctement initialisé.

// ❌ Mauvais
const user = useUserStore();

// ✅ Correct
import { useUserStore } from '../stores/user';

const user = useUserStore();

Erreur 2 : "Uncaught ReferenceError: defineStore is not defined"

Cette erreur signifie que Pinia n'est pas correctement installé ou configuré.

// ❌ Mauvais
import { defineStore } from 'pinia';

// ✅ Correct
npm install pinia

Erreur 3 : "Uncaught TypeError: Cannot read property 'xxx' of undefined"

Cette erreur peut survenir si vous essayez d'accéder à une propriété non définie dans le store.

// ❌ Mauvais
const user = useUserStore();
console.log(user.name);

// ✅ Correct
if (user.name) {
  console.log(user.name);
}

Pour aller plus loin

1. Persistance des états : Utilisez des bibliothèques comme pinia-plugin-persistedstate pour persister les états entre les sessions.
2. Modèles de données réactifs avancés : Explorez les modèles de données réactifs plus complexes avec Pinia.
3. Intégration avec Vue Router : Apprenez comment intégrer Pinia avec Vue Router pour gérer le state des routes.

Défi pratique : Créez un mini-projet d'application de gestion de contacts en utilisant Pinia pour la gestion du state et Vue Router pour la navigation entre les vues.