Erfahren Sie, wie Sie Composeable verwenden, um den Pinia-Store in Nuxt 3 aufzurufen
P粉418351692
P粉418351692 2023-08-26 09:34:11
0
2
708
<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>
P粉418351692
P粉418351692

Antworte allen(2)
P粉186897465

您在 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

P粉378264633

这是因为像你所做的那样,在任何函数之外声明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内部
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!