Pinia InternalError：在 Quasar 中使用 q-list 时出现太多递归错误
<p>在我的 Quasar 组件中使用 Pinia Store 时，我遇到了这个错误 <code>InternalError: Too much recursion</code>，我已经做了我所知道的一切但没有解决。</p><p>
我可以在这里得到建议吗？</p>
<p>这是我的 <code>IndexPage.vue</code>，我在其中调用 QList 组件：</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>
import QList from 'src/components/QList.vue';
export default {
components: {
QList
}
}
</script></pre>
<p>这是我的 <code>QList.vue</code> 组件：</p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p>还有我的 <code>testeStore.js</code> 商店：</p>
<pre class="brush:php;toolbar:false;">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
}
}
}
})</pre>
<p>每个组件看起来都很正常，我真的不知道我的问题出在哪里。
这是来自控制台的一段 vue warn：</p>
<pre class="brush:php;toolbar: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="" ></pre></p>
1
697
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
刚刚检查了 stackblitz，看起来您自己的 QList 组件和 Quasar 的内置“q-list”组件之间存在命名冲突。 Vue 对待组件名称不区分大小写，这就是为什么它将“q-list”和“QList”解释为同一个组件。
要解决此问题，您可以尝试将自己的 QList 组件重命名为与 Quasar 组件不冲突的其他名称，例如“MyQList”，或者使用别名导入 Quasar“q-list”组件。
从 'quasar' 导入 { Qlist as QuasarList }