Découvrez comment utiliser Composeable pour appeler la boutique Pinia dans Nuxt 3

Question

Depuis la mise à jour nuxt 3.4.0, pinia store ne peut plus être utilisé dans les composables.

//Exemple composable
importer { useAuthStore } depuis '~/store/auth-store' ;
const authStore = useAuthStore();

fonction d'exportation doSomethingWithStore() {
  retourner authStore.checkAuthUser ;
}
Vous recevrez l'erreur suivante
getActivePinia a été appelé sans Pinia actif Avez-vous oublié d'installer pinia = createPinia() app.use(pinia) Cela échouera en production. ≪/pré>
Voir l'exemple de stackblitz
https://stackblitz.com/edit/broken-pinia-store-in-composeables?file=composables%2FthisBreaks.js,nuxt.config.ts
            

Answer 1

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

Answer 2

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