Gestion d'état et persistance des données

Dans le chapitre précédent, nous avons terminé la composantisation. Nous faisons maintenant face au dernier problème concret :Rafraîchissement de la page, toutes les données sont perdues.。

Pour résoudre ce problème, nous allons introduire la bibliothèque de gestion d'état officiellement recommandée par VuePinia, et combinerTailwind v4avec les capacités de style, afin d'obtenir des donnéesstockées de manière persistante。

Gestion d'état et persistance des données avec Pinia

Pinia est une bibliothèque légère de gestion d'état pour Vue.js. Elle vous permet de partager et de gérer l'état entre les composants. On peut considérer Pinia comme un store de données global ; tous les composants peuvent y récupérer des données ou y mettre à jour des données.

Référence pour le contenu lié à Pinia :Tutoriel d'introduction à Pinia。

Pourquoi utiliser Pinia ?

Dans le code précédent, les données se trouvaient toutesApp.vuelà-dedans. Si le projet grandit (par exemple, ajout d'une page de statistiques, d'un espace utilisateur), le passage de données entre composants devient un cauchemar à la poupée russe (Props Hell).

Piniafournit un store de données global.
N'importe quel composant peut directement obtenir des données depuis le store, ou déclencher des méthodes sur le store.

Installation et initialisation :

npm install pinia
npm install @vue/devtools-kit -D

Enregistrer dans src/main.js :

Exemple

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

const app = createApp(App)
app.use(createPinia()) // Enregistrement du plugin
app.mount('#app')

Créer le store de tâches (store)

Créez un répertoire `stores` sous le répertoire `src`, puis créez `taskStore.js` sous `src/stores`.

Nous allons déplacer ici toute la logique qui se trouvait à l'origine dans App.vue.

Exemple

import { defineStore } from 'pinia'
import { ref, computed, watch } from 'vue'

export const useTaskStore = defineStore('task-store', () => {
// --- 1. État ---
// Essayer de lire la valeur initiale depuis LocalStorage
const savedTasks = localStorage.getItem('my-tasks')
const tasks = ref(savedTasks ? JSON.parse(savedTasks) : [])
const filter = ref('all')

// --- 2. État dérivé (Getters) ---
const filteredTasks = computed(() => {
if (filter.value === 'active') return tasks.value.filter(t => !t.isCompleted)
if (filter.value === 'completed') return tasks.value.filter(t => t.isCompleted)
return tasks.value
})

// --- 3. Actions ---
const addTask = (title) => {
tasks.value.unshift({ id: crypto.randomUUID(), title, isCompleted: false })
}

const removeTask = (id) => {
tasks.value = tasks.value.filter(t => t.id !== id)
}

const toggleTask = (id) => {
const task = tasks.value.find(t => t.id === id)
if (task) task.isCompleted = !task.isCompleted
}

// --- 4. Persistance ---
// Surveiller les changements dans les tâches, dès qu'un changement se produit, écrire dans LocalStorage
watch(tasks, (newVal) => {
localStorage.setItem('my-tasks', JSON.stringify(newVal))
}, { deep: true }) // Observer en profondeur les modifications des objets à l'intérieur du tableau

return {
tasks,
filter,
filteredTasks,
addTask,
removeTask,
toggleTask
}
})

Refactoriser App.vue (Connexion au Store)

Désormais, App.vue n'a plus besoin de gérer les données lui-même ; il lui suffit d'appeler le Store.

Exemple

Explication détaillée des notions

1. `storeToRefs`Qu'est-ce que c'est ?

Si vous l'écrivez directement comme ceci :const { filter } = taskStore, vous perdrez la réactivité. Lorsque vous modifiezfilter, la page ne s'actualisera pas.

Raison: Le store est unreactiveobjet encapsulé ; la déstructuration directe brisera la référence.
Solution: UtiliserstoreToRefs. Il convertira l'état du store enref, garantissant qu'après la déstructuration, il peut toujours « déplacer tout le corps en tirant un seul cheveu ».

2. `watch`Surveillance profonde (deep: true)

Dans la logique de persistance, ce que nous surveillons esttasksle tableau.

Si vous ne l'ajoutez pas{ deep: true }, ce n'est que lorsque le tableau est remplacé (par exemple,tasks.value = []) que l'enregistrement sera déclenché.
Après l'avoir ajouté, les modifications apportées aux propriétés des objets à l'intérieur du tableau (par exemple, une tâche passant de "pending" à "completed") seront également capturées et enregistrées sur le disque.

3. Approche de persistance

Nous utilisons une boucle fermée de "lecture à l'initialisation + écriture en cas de changement" :

Lecture: Lorsque le Store est créé, à partir delocalStoragela récupération des données, donnant à l'application une "mémoire".
Écriture: Utilisezwatchpour parvenir à une synchronisation entièrement automatisée, les développeurs n'ont plus besoin d'écrire manuellementsetItem。

Finitions finales avec Tailwind v4

Avec le support du Store, nous pouvons ajouter quelquesstyles de retour globaux. Par exemple, dans leTaskHeader.vueafficher la progression des tâches :

Exemple

Après la modification, toute l'interface dispose désormais de la fonctionnalité de barre de progression :

Autres extensions

Manuel de référence

Cas pratique 1

Cas pratique 2

Gestion d'état et persistance des données