Pinia InternalError: Zu viele Rekursionsfehler bei der Verwendung von q-list in Quasar
<p>Bei der Verwendung von Pinia Store in meiner Quasar-Komponente ist dieser Fehler <code>InternalError: Too much recursion</code> aufgetreten und ich habe alles getan, was ich weiß, aber keine Lösung gefunden. </p><p>
Kann ich mich hier beraten lassen? </p>
<p>Dies ist meine <code>IndexPage.vue</code>, wo ich die QList-Komponente aufrufe: </p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p>Dies ist meine <code>QList.vue</code>
<pre class="brush:php;toolbar:false;"><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></pre>
<p>还有我的 <code>testeStore.js</code> 商JI:</p>
<pre class="brush:php;toolbar:false;">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
}
}
}
})</pre>
<p>这是来自控制台的一段 vue warn:</p>
<pre class="brush:php;toolbar:false;">[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="" ></pre></p>