Ketahui cara menggunakan Composeable untuk memanggil kedai Pinia dalam Nuxt 3
P粉418351692
2023-08-26 09:34:11
<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>
Anda menggantikannya dalam
nuxt.config.ts
中错误地安装了 @pinia/nuxt 模块。在 Nuxt 3 中,buildModules
属性已经不存在了,您需要使用modules
(anda boleh tahu dengan ralat TypeScript):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.Sila rujuk ini berfungsi stackblitz
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:
Tempat yang selamat untuk membuat panggilan Pinia (mungkin bukan senarai lengkap):
<script setup>
<template>
dalam bahagiandefineNuxtMiddleware