Pinia InternalError：在 Quasar 中使用 q-list 时出现太多递归错误

Question

<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 提出问题 
  在 
  在 
  在 
  在 
  在 
  在 
  在 
  在 
  在 
  在 
  在 
  在 
  在 
  在 
  在 
  在 
  在 
  在 
  在 
  在 
  在
P粉262073176413 天前381 

Answer 1

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

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

从 'quasar' 导入 { Qlist as QuasarList }