Ketahui cara menggunakan Composeable untuk memanggil kedai Pinia dalam Nuxt 3
P粉418351692
P粉418351692 2023-08-26 09:34:11
0
2
746
<p>Sejak kemas kini nuxt 3.4.0, stor pinia tidak boleh digunakan dalam kompos. </p> <pre class="brush:php;toolbar:false;">//Contoh boleh digubah import { useAuthStore } daripada '~/store/auth-store'; const authStore = useAuthStore(); fungsi eksport doSomethingWithStore() { kembalikan authStore.checkAuthUser; }</pre> <p>Anda akan menerima ralat berikut</p> <pre class="brush:php;toolbar:false;">getActivePinia dipanggil tanpa Pinia aktif Adakah anda terlupa memasang pinia const pinia = createPinia() app.use(pinia) Ini akan gagal dalam pengeluaran. </pra> <p>Lihat contoh stackblitz https://stackblitz.com/edit/broken-pinia-store-in-composeables?file=composables%2FthisBreaks.js,nuxt.config.ts</p>
P粉418351692
P粉418351692

membalas semua(2)
P粉186897465

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

P粉378264633

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
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan