学习如何在Nuxt 3中使用Composeable来调用Pinia store
P粉418351692
2023-08-26 09:34:11
<p>自从nuxt 3.4.0更新以后,无法在composeables中使用pinia store。</p>
<pre class="brush:php;toolbar:false;">//例子composeable
import { useAuthStore } from '~/store/auth-store';
const authStore = useAuthStore();
export function doSomethingWithStore() {
return authStore.checkAuthUser;
}</pre>
<p>你将会收到以下错误</p>
<pre class="brush:php;toolbar:false;">getActivePinia was called with no active Pinia. Did you forget to install pinia? const pinia = createPinia() app.use(pinia) This will fail in production.</pre>
<p>查看stackblitz例子
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
内部