Ketahui cara menggunakan Composeable untuk memanggil kedai Pinia dalam Nuxt 3

Question

Sejak kemas kini nuxt 3.4.0, stor pinia tidak boleh digunakan dalam kompos.

//Contoh boleh digubah
import { useAuthStore } daripada '~/store/auth-store';
const authStore = useAuthStore();

fungsi eksport doSomethingWithStore() {
  kembalikan authStore.checkAuthUser;
}

Anda akan menerima ralat berikut

getActivePinia dipanggil tanpa Pinia aktif Adakah anda terlupa memasang pinia const pinia = createPinia() app.use(pinia) Ini akan gagal dalam pengeluaran. 
Lihat contoh stackblitz
https://stackblitz.com/edit/broken-pinia-store-in-composeables?file=composables%2FthisBreaks.js,nuxt.config.ts

Answer 1

Anda menggantikannya dalam nuxt.config.ts 中错误地安装了 @pinia/nuxt 模块。在 Nuxt 3 中，buildModules 属性已经不存在了，您需要使用 modules (anda boleh tahu dengan ralat TypeScript):

// nuxt.config.ts
export default defineNuxtConfig({
  // replace buildModules by modules
  modules: ['@pinia/nuxt'],
});

Titik kedua, anda juga perlu memanggil useAuthStore di dalam fungsi combiner, jika tidak ia akan cuba memuatkan kedai sebelum pinia benar-benar dimuatkan. Ia dipanggil apabila fail diimport, bukan apabila fungsi penggabung digunakan.

import { useAuthStore } from '~/store/auth-store';

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

Sila rujuk ini berfungsi stackblitz

Answer 2

Ini kerana pengisytiharan const authStore = useAuthStore(); di luar sebarang fungsi seperti yang anda lakukan akan dipanggil pada beberapa peringkat awal dalam permulaan aplikasi, dan sebelum tika Pinia telah dimulakan dengan betul dalam tika Vue.

Ini akan berfungsi:

import { useAuthStore } from '~/store/auth-store';

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

Tempat yang selamat untuk membuat panggilan Pinia (mungkin bukan senarai lengkap):

• Dalam <script setup>
• Sebaris <template> dalam bahagian
• Dalam defineNuxtMiddleware