Pinia InternalError: terlalu banyak ralat rekursi apabila menggunakan q-list dalam Quasar

Question

Semasa menggunakan Pinia Store dalam komponen Quasar saya, saya mengalami ralat ini Ralat Dalaman: Terlalu banyak rekursi

Bolehkah saya mendapatkan nasihat di sini?

Ini ialah IndexPage.vue tempat saya memanggil komponen QList:

<template>
  <q-halaman>
      <div class="q-pa-md"style="lebar maksimum: 350px">
        <QList />
    </div>
  </q-page>
</template>

<skrip>
import QList daripada 'src/components/QList.vue';

eksport lalai {
  komponen: {
    QList
  }
}
</script>

Ini adalah komponen QList.vue

<template>
    <div v-if="memuatkan">Carregando...</div>
    <q-senarai v-pemisah bersempadan lain>
        <q-item v-for="item dalam testData" :key="item.id" v-riak boleh klik>
            <q-item-section>{{ item.title }}</q-item-section>
        </q-item>
    </q-list>
</template>

<skrip>
import { testeStore } daripada '../stores/teste'
import { defineComponent, computed, onMounted } daripada 'vue';

eksport lalai defineComponent({
    persediaan () {
        const store = testeStore();

        onMounted(() => {
            store.loadData();
        });

        const testData = dikira(() => store.getData());
        const loading = dikira(() => store.$state.loading);

        kembali {
            testData,
            memuatkan
        }

    }
})
</script>

还有我的 testeStore.js 商店：

import { defineStore } daripada 'pinia'
import testeData daripada '../assets/data/testes.json'

eksport const testeStore = defineStore({
  id: 'teste',
  nyatakan: () => ({
    data: [],
    memuatkan: palsu,
  }),
  pengambil: {
    getData: negeri => state.data,
  },
  tindakan: {
    loadData () {
      cuba {
        this.loading = benar
        this.data = testeData;
      } tangkap (ralat) {
        console.log(`Ralat mengambil ujian: ${{ ralat }}`)
      } akhirnya {
        this.loading = palsu
      }
    }

  }
})

每个组件看起来都很正常，我真的不知道我的问题出在哪里。这是来自控制台的一段 vue amaran：

[Vue warn]: Ralat tidak dikendalikan semasa melaksanakan flush penjadual. Ini berkemungkinan pepijat dalaman Vue. Sila buka isu di https://new-issue.vuejs.org/?repo=vuejs/core 
  di  
  di  
  di  
  di  
  di  
  di  
  di  
  di  
  di  
  di  
  di  
  di  
  di  
  di  
  di  
  di  
  di  
  di  
  di  
  di  
  di 
            

Answer 1

Baru sahaja menyemak stackblitz dan nampaknya terdapat konflik penamaan antara komponen QList anda sendiri dan komponen "q-list" terbina dalam Quasar. Vue memperlakukan nama komponen secara tidak sensitif huruf, itulah sebabnya ia mentafsirkan "senarai-q" dan "QList" sebagai komponen yang sama.

Untuk menyelesaikan masalah ini, anda boleh cuba menamakan semula komponen QList anda kepada nama lain yang tidak bercanggah dengan komponen Quasar, seperti "MyQList", atau gunakan alias untuk mengimport komponen "q-list" Quasar.

从 'quasar' 导入 { Qlist as QuasarList }