Erfahren Sie, wie Sie Composeable verwenden, um den Pinia-Store in Nuxt 3 aufzurufen
P粉418351692
2023-08-26 09:34:11
<p>Seit Nuxt 3.4.0 Update kann Pinia Store nicht in Composeables verwendet werden. </p>
<pre class="brush:php;toolbar:false;">//Beispiel zusammensetzbar
import { useAuthStore } from '~/store/auth-store';
const authStore = useAuthStore();
Exportfunktion doSomethingWithStore() {
return authStore.checkAuthUser;
}</pre>
<p>Sie erhalten die folgende Fehlermeldung</p>
<pre class="brush:php;toolbar:false;">getActivePinia wurde ohne aktives Pinia aufgerufen. Haben Sie vergessen, pinia = createPinia() app.use(pinia) zu installieren? </pre>
<p>Stapelblitz-Beispiel ansehen
https://stackblitz.com/edit/broken-pinia-store-in-composeables?file=composables%2FthisBreaks.js,nuxt.config.ts</p>
您在
nuxt.config.ts
中错误地安装了 @pinia/nuxt 模块。在 Nuxt 3 中,buildModules
属性已经不存在了,您需要使用modules
替代它(您可以通过 TypeScript 错误来判断):第二点,您还需要在组合函数内部调用
useAuthStore
,否则它会在 pinia 实际加载之前尝试加载存储。它会在文件被导入时调用,而不是在组合函数被使用时调用。请参考这个可工作的 stackblitz
这是因为像你所做的那样,在任何函数之外声明
const authStore = useAuthStore();
会在应用程序启动的某个早期阶段调用,并且在Vue实例内正确初始化Pinia实例之前。这样做会起作用:
可以安全地进行Pinia调用的地方(可能不是完整的列表):
<script setup>
内部<template>
部分内联defineNuxtMiddleware
内部