Pinia InternalError:在类星体中使用q-list时，递归误差过大

Question

当我在类星体组件中使用Pinia Store时，我卡住了这个错误InternalError: too much recursion，我已经做了我所知道的一切，没有解决。
我能得到一个建议吗?

这是我的IndexPage.vue，我调用QList组件:

<template>
<q-page>
<div class="q-pa-md" style="max-width: 350px">
<QList />
</div>
</q-page>
</template>
<script>
import QList from 'src/components/QList.vue';
export default {
components: {
QList
}
}
</script>

这是我的QList.vue组件:

<template>
<div v-if="loading">Carregando...</div>
<q-list v-else bordered separator>
<q-item v-for="item in testData" :key="item.id" clickable v-ripple>
<q-item-section>{{ item.title }}</q-item-section>
</q-item>
</q-list>
</template>
<script>
import { testeStore } from '../stores/teste'
import { defineComponent, computed, onMounted } from 'vue';
export default defineComponent({
setup () {
const store = testeStore();
onMounted(() => {
store.loadData();
});
const testData = computed(() => store.getData());
const loading = computed(() => store.$state.loading);
return {
testData,
loading
}
}
})
</script>

和我的testeStore.js存储:

import { defineStore } from 'pinia'
import testeData from '../assets/data/testes.json'
export const testeStore = defineStore({
id: 'teste',
state: () => ({
data: [],
loading: false,
}),
getters: {
getData: state => state.data,
},
actions: {
loadData () {
try {
this.loading = true
this.data = testeData;
} catch (error) {
console.log(`Error fetching testes: ${{ error }}`)
} finally {
this.loading = false
}
}
}
})

每个部件看起来都很正常，我真的不知道我的问题在哪里。下面是我们从控制台发出的警告:

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at 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组件和类星体的内置'q-list'组件之间有命名冲突。Vue对组件名不区分大小写，这就是为什么它会将'q-list'和'QList'解释为相同的组件。

要解决这个问题，您可以尝试将自己的QList组件重命名为与类星体组件不冲突的其他内容，例如'MyQList'，或者使用别名导入类星体'q-list'组件。

import { Qlist as QuasarList } from 'quasar'