Découvrez comment utiliser Composeable pour appeler la boutique Pinia dans Nuxt 3
P粉418351692
2023-08-26 09:34:11
<p>Depuis la mise à jour nuxt 3.4.0, pinia store ne peut plus être utilisé dans les composables. </p>
<pre class="brush:php;toolbar:false;">//Exemple composable
importer { useAuthStore } depuis '~/store/auth-store' ;
const authStore = useAuthStore();
fonction d'exportation doSomethingWithStore() {
retourner authStore.checkAuthUser ;
}</pré>
<p>Vous recevrez l'erreur suivante</p>
<pre class="brush:php;toolbar:false;">getActivePinia a été appelé sans Pinia actif Avez-vous oublié d'installer pinia = createPinia() app.use(pinia) Cela échouera en production. ≪/pré>
<p>Voir l'exemple de stackblitz
https://stackblitz.com/edit/broken-pinia-store-in-composeables?file=composables%2FthisBreaks.js,nuxt.config.ts</p>
Vous le remplacez dans
nuxt.config.ts
中错误地安装了 @pinia/nuxt 模块。在 Nuxt 3 中,buildModules
属性已经不存在了,您需要使用modules
(vous pouvez le constater par l'erreur TypeScript) :Deuxième point, vous devez également appeler
useAuthStore
à l'intérieur de la fonction combiner, sinon elle essaiera de charger le magasin avant que pinia ne se charge réellement. Il est appelé lorsque le fichier est importé, et non lorsque la fonction combineur est utilisée.Veuillez vous référer à ce stackblitz
fonctionnelEn effet, déclarer
const authStore = useAuthStore();
en dehors de toute fonction comme vous l'avez fait sera appelé à un stade précoce du démarrage de l'application, et avant que l'instance Pinia n'ait été correctement initialisée dans l'instance Vue.Cela fonctionnera :
Lieux où il est sécuritaire de passer des appels Pinia (la liste peut ne pas être complète) :
<script setup>
<template>
sectiondefineNuxtMiddleware