nuxt3 如何在 composable 中调用 pinia store

Question

自 nuxt 3.4.0 更新后，pinia 商店不能再用于可组合物。

//example composable
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

这是因为

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

Answer 2

你在

nuxt.config.ts

中错误地安装了@pinia/nuxt 模块。

buildModules

属性在 Nuxt 3 中不再存在，您必须使用

modules

代替。 （你可以通过你得到的打字稿错误来判断）：

// 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