学习如何在Nuxt 3中使用Composeable来调用Pinia store

Question

自从nuxt 3.4.0更新以后，无法在composeables中使用pinia store。

//例子composeable
import { useAuthStore } from '~/store/auth-store';
const authStore = useAuthStore();

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

你将会收到以下错误

getActivePinia was called with no active Pinia. Did you forget to install pinia? const pinia = createPinia() app.use(pinia) This will fail in production.

查看stackblitz例子 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内部