<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-item v-for=“测试数据中的项目” :key="item.id";可点击的V型波纹>
{{ item.title }}
</q-item>
</q-列表>
</模板>
<脚本>
从 '../stores/teste' 导入 { testeStore }
从“vue”导入{defineComponent,计算,onMounted};
导出默认定义组件({
设置 () {
const store = testeStore();
onMounted(() => {
store.loadData();
});
const testData = 计算(() => store.getData());
const 加载 = 计算(() => store.$state.loading);
返回 {
测试数据,
加载中
}
}
})
</脚本></pre>
<p>还有我的 <code>testeStore.js</code> 商店:</p>
<pre class="brush:php;toolbar:false;">从 'pinia' 导入 { DefineStore }
从 '../assets/data/testes.json' 导入 testeData
导出 const testeStore = DefineStore({
id: '测试',
状态:() => ({
数据: [],
加载:假,
}),
吸气剂:{
获取数据:状态=>状态.数据,
},
行动:{
加载数据(){
尝试 {
this.loading = true
this.data = testeData;
} 捕获(错误){
console.log(`获取睾丸时出错:${{ error }}`)
} 最后 {
this.loading = false
}
}
}
})</pre>
<p>每个组件看起来都很正常,我真的不知道我的问题出在哪里。这是来自控制台的一段vue warn:</p>
[Vue warn]:执行调度程序刷新期间出现未处理的错误。这可能是 Vue 内部错误。请在 https://new-issue.vuejs.org/?repo=vuejs/core 提出问题
在
在
在
在
在
在
在
在
在
在
在
在
在
在
在
在
在
在
在
在
在
刚刚检查了 stackblitz,看起来您自己的 QList 组件和 Quasar 的内置“q-list”组件之间存在命名冲突。 Vue 对待组件名称不区分大小写,这就是为什么它将“q-list”和“QList”解释为同一个组件。
要解决此问题,您可以尝试将自己的 QList 组件重命名为与 Quasar 组件不冲突的其他名称,例如“MyQList”,或者使用别名导入 Quasar“q-list”组件。
从 'quasar' 导入 { Qlist as QuasarList }