学习如何在Nuxt 3中使用Composeable来调用Pinia store
P粉418351692
P粉418351692 2023-08-26 09:34:11
0
2
741
<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>
P粉418351692
P粉418351692

全部回复(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内部
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板