學習如何在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/thisBreaks.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內部