Si vous construisez une application de taille moyenne, vous finirez par utiliser des gardes de navigation pour parcourir les différentes pages de votre application.
Le cas d’utilisation classique : vous souhaitez vérifier qu’un objet existe bien avant de charger ses détails (par exemple sur l’intercepteur beforeEnter).
Maintenant, si vous construisez l’application avec Vue 3 et Pinia, c’est en interrogeant un magasin que vous lisez cet objet.
Cependant, l’application ne charge pas Pinia avant l’appel mount et vous chargez le routeur avant cela…
Par conséquent, Pinia lancera une erreur « getActivePinia() » a été appelé mais il n’y avait pas de Pinia actif. Essayez-vous d’utiliser un magasin avant d’appeler « app.use(pinia) » ? Consultez https://pinia.vuejs.org/core-concepts/outside-component-usage.html pour obtenir de l’aide. Cela échouera en production.
Quelle est la solution ? J’ai suivi les étapes de cette réponse Stackoverflow.
- Créez un fichier
pinia.tspour instancier Pinia. Placez-le dans le même endroit que vous avez mis vos magasins. - Importez-le et appelez
usesur l’instance d’application dansmain.ts - Importez-le aussi dans
src/router/index.tset fournissez-le à votre instance de magasin qui vous permet de lire l’objet cible :const store = useStore( pinia )
La signature du store useStory n’a pas besoin d’être modifiée. Fournir l’instance pinia à useStore() est suffisant pour que cela fonctionne.
Si vous voulez apprendre à utiliser Pinia, VueSchool.io propose un excellent cours sur le sujet ! Je vous le recommande.
Crédit : image tirée du cours de VueSchool sur Pinia.
