Erfahren Sie, wie Sie Composeable verwenden, um den Pinia-Store in Nuxt 3 aufzurufen

Question

Seit Nuxt 3.4.0 Update kann Pinia Store nicht in Composeables verwendet werden.

//Beispiel zusammensetzbar
import { useAuthStore } from '~/store/auth-store';
const authStore = useAuthStore();

Exportfunktion doSomethingWithStore() {
  return authStore.checkAuthUser;
}

Sie erhalten die folgende Fehlermeldung

getActivePinia wurde ohne aktives Pinia aufgerufen. Haben Sie vergessen, pinia = createPinia() app.use(pinia) zu installieren? 

Stapelblitz-Beispiel ansehen https://stackblitz.com/edit/broken-pinia-store-in-composeables?file=composables%2FthisBreaks.js,nuxt.config.ts

Answer 1

您在 nuxt.config.ts 中错误地安装了 @pinia/nuxt 模块。在 Nuxt 3 中，buildModules 属性已经不存在了，您需要使用 modules 替代它（您可以通过 TypeScript 错误来判断）：

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

第二点，您还需要在组合函数内部调用 useAuthStore，否则它会在 pinia 实际加载之前尝试加载存储。它会在文件被导入时调用，而不是在组合函数被使用时调用。

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

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

请参考这个可工作的 stackblitz

Answer 2

这是因为像你所做的那样，在任何函数之外声明const authStore = useAuthStore();会在应用程序启动的某个早期阶段调用，并且在Vue实例内正确初始化Pinia实例之前。

这样做会起作用：

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

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

可以安全地进行Pinia调用的地方（可能不是完整的列表）：

• 在<script setup>内部
• 在<template>部分内联
• 在defineNuxtMiddleware内部