storeToRefs avec Pinia : pourquoi et quand l’utiliser ?

Introduction

Lorsque tu travailles avec Pinia, le système de gestion d’état officiel de Vue.js, tu profites d’un store centralisé pour gérer tes données de manière réactive. Mais attention : une erreur courante consiste à déstructurer directement les propriétés du store dans ton code, ce qui casse la réactivité de Vue. Heureusement, Pinia fournit une solution élégante à ce problème : storeToRefs.

Dans cet article, on va découvrir pourquoi et quand utiliser storeToRefs, avec des exemples simples et concrets pour t’aider à l’intégrer naturellement dans tes composants Vue.

Problème : la déstructuration casse la réactivité

Lorsque tu utilises un store avec Pinia :

const userStore = useUserStore()
const { name } = userStore // ❌ Ici tu perds la réactivité

Solution : il faut utiliser storeToRefs

import { storeToRefs } from 'pinia'

const userStore = useUserStore()
const { name } = storeToRefs(userStore) // Ici name devient un ref() réactif

Utilise storeToRefs quand tu veux extraire des données du store dans <script setup> tout en gardant la synchronisation automatique avec l’interface.

Exemple simple sans storeToRefs (valide et réactif quand même !)

La question est: est-il possible d’utiliser la réactivité de mon store sans forcément passer par storeToRefs ? si oui comment ?

Voici un exemple fonctionnel sans storeToRefs :

<script setup lang="ts">
import { useCountStore } from '@/stores/count'

const countStore = useCountStore()
</script>

<template>
  <div>
    <p>Count: {{ countStore.count }}</p>
    <button @click="countStore.increment">Increment</button>
    <button @click="countStore.decrement">Decrement</button>
  </div>
</template>

Ici, pas besoin de storeToRefs, car tu n’as pas déstructuré les propriétés du store. Tu accèdes à countStore.count directement, donc la réactivité est conservée.

Quand utiliser storeToRefs alors ?

• Tu veux déstructurer des valeurs du store : const { name, email } = storeToRefs(userStore)

• Tu veux un code plus propre et ciblé dans ton <script setup>

• Tu travailles dans des composants où la lisibilité et la clarté sont essentielles

Résumé visuel

Conclusion

Tu peux :

• Utiliser store.count directement → pas de souci.

• Si tu veux extraire (const { count } = ...) → pense à storeToRefs.

Petit rappel : storeToRefs ne s’applique qu’au state et aux getters, pas aux actions.