Quasar中使用QList结合Pinia时出现InternalError: too much recursion问题求助

在Quasar组件中使用Pinia Store时遇到InternalError: too much recursion错误，常规排查方法均无效，相关代码及控制台警告如下：

相关代码 #

1. IndexPage.vue（引入自定义组件） #

<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>

2. QList.vue（使用Pinia渲染列表） #

<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>

3. testeStore.js（Pinia状态管理） #

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="" > 
  ...（重复的<QList>调用记录）

问题根源与解决方法 #

问题原因 #

自定义组件命名为QList，与Quasar内置的<q-list>组件名称冲突。当自定义组件模板中使用<q-list>时，Vue会将其解析为你的自定义组件而非Quasar官方组件，导致无限递归渲染自身，最终触发栈溢出的递归错误。

解决步骤 #

1. 修改自定义组件名称：将QList.vue重命名为不与Quasar组件冲突的名称，比如MyList.vue或CustomList.vue
2. 更新组件引用：在IndexPage.vue中同步修改组件的引入、注册及模板使用

修改后的示例代码

IndexPage.vue

<template>
  <q-page>
      <div class="q-pa-md" style="max-width: 350px">
        <MyList />
    </div>
  </q-page>
</template>

<script>
import MyList from 'src/components/MyList.vue';

export default {
  components: {
    MyList
  }
}
</script>

MyList.vue（原QList.vue）

<template>
    <div v-if="loading">加载中...</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>

其他代码无需修改，完成上述调整后即可解决递归错误。

内容的提问来源于stack exchange，提问作者Lucas Marra