Pinia InternalError: Zu viele Rekursionsfehler bei der Verwendung von q-list in Quasar

Question

Bei der Verwendung von Pinia Store in meiner Quasar-Komponente ist dieser Fehler InternalError: Too much recursion aufgetreten und ich habe alles getan, was ich weiß, aber keine Lösung gefunden.

Kann ich mich hier beraten lassen?

Dies ist meine IndexPage.vue, wo ich die QList-Komponente aufrufe:

<template>
  <q-page>
      <div class="q-pa-md" style="max-width: 350px">
        <QList />
    </div>
  </q-page>
</template>

<script>
QList aus 'src/components/QList.vue' importieren;

Standard exportieren {
  Komponenten: {
    QList
  }
}
</script>

Dies ist meine QList.vue

<template>
    <div v-if="loading">Carregando...</div>
    <q-list v-else umrandetes Trennzeichen>
        <q-item v-for="item in testData" :key="item.id" anklickbares V-Ripple>
            <q-item-section>{{ item.title }}</q-item-section>
        </q-item>
    </q-list>
</template>

<script>
importiere { testeStore } aus '../stores/teste'
import { defineComponent, berechnet, onMounted } from 'vue';

Standard exportieren defineComponent({
    aufstellen () {
        const store = testeStore();

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

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

        zurückkehren {
            Testdaten,
            Wird geladen
        }

    }
})
</script>

还有我的 testeStore.js 商JI:

import { defineStore } from 'pinia'
testeData aus „../assets/data/testes.json“ importieren

export const testeStore = defineStore({
  id: 'teste',
  Zustand: () => ({
    Daten: [],
    Laden: falsch,
  }),
  Getter: {
    getData: state => state.data,
  },
  Aktionen: {
    lade Daten () {
      versuchen {
        this.loading = true
        this.data = testeData;
      } Catch (Fehler) {
        console.log(`Fehler beim Abrufen der Tests: ${{ error }}`)
      } Endlich {
        this.loading = false
      }
    }

  }
})

这是来自控制台的一段 vue warn:

[Vue warn]: Unbehandelter Fehler während der Ausführung des Scheduler-Flushes. Dies ist wahrscheinlich ein interner Fehler von Vue. Bitte öffnen Sie ein Problem unter https://new-issue.vuejs.org/?repo=vuejs/core 
  at <QList key=1 bordered="" Separator="" > 
  at <QList key=1 bordered="" Separator="" > 
  at <QList key=1 bordered="" Separator="" > 
  at <QList key=1 bordered="" Separator="" > 
  at <QList key=1 bordered="" Separator="" > 
  at <QList key=1 bordered="" Separator="" > 
  at <QList key=1 bordered="" Separator="" > 
  at <QList key=1 bordered="" Separator="" > 
  at <QList key=1 bordered="" Separator="" > 
  at <QList key=1 bordered="" Separator="" > 
  at <QList key=1 bordered="" Separator="" > 
  at <QList key=1 bordered="" Separator="" > 
  at <QList key=1 bordered="" Separator="" > 
  at <QList key=1 bordered="" Separator="" > 
  at <QList key=1 bordered="" Separator="" > 
  at <QList key=1 bordered="" Separator="" > 
  at <QList key=1 bordered="" Separator="" > 
  at <QList key=1 bordered="" Separator="" > 
  at <QList key=1 bordered="" Separator="" > 
  at <QList key=1 bordered="" Separator="" > 
  at <QList key=1 bordered="" Separator="" >

Answer 1

刚刚检查了 stackblitz，看起来您自己的 QList 组件和 Quasar 的内置“q-list”组件之间存在命名冲突。 Vue 对待组件名称不区分大小写，这就是为什么它将“q-list”和“QList”解释为同一个组件。

要解决此问题，您可以尝试将自己的 QList 组件重命名为与 Quasar 组件不冲突的其他名称，例如“MyQList”，或者使用别名导入 Quasar“q-list”组件。

从 'quasar' 导入 { Qlist as QuasarList }