Découvrez comment utiliser Composeable pour appeler la boutique Pinia dans Nuxt 3
P粉418351692
P粉418351692 2023-08-26 09:34:11
0
2
742
<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>
P粉418351692
P粉418351692

répondre à tous(2)
P粉186897465

Vous le remplacez dans nuxt.config.ts 中错误地安装了 @pinia/nuxt 模块。在 Nuxt 3 中,buildModules 属性已经不存在了,您需要使用 modules (vous pouvez le constater par l'erreur TypeScript) :

// nuxt.config.ts
export default defineNuxtConfig({
  // replace buildModules by modules
  modules: ['@pinia/nuxt'],
});

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.

import { useAuthStore } from '~/store/auth-store';

export function doSomethingWithStore() {
  const authStore = useAuthStore();
  return authStore.checkAuthUser;
}

Veuillez vous référer à ce stackblitz

fonctionnel
P粉378264633

En 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 :

import { useAuthStore } from '~/store/auth-store';

export function doSomethingWithStore() {
  const authStore = useAuthStore();
  return authStore.checkAuthUser;
}

Lieux où il est sécuritaire de passer des appels Pinia (la liste peut ne pas être complète) :

  • À l'intérieur <script setup>
  • En ligne dans la <template>section
  • À l'intérieur defineNuxtMiddleware
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal