Pinia InternalError: too many recursion errors when using q-list in Quasar

Question

While using Pinia Store in my Quasar component I encountered this error InternalError: Too much recursion and I have done everything I know but no resolution.

Can I get advice here?

This is my IndexPage.vue where I call the QList component:

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

This is my QList.vue component:

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

[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

Just checked stackblitz and it looks like there is a naming conflict between your own QList component and Quasar's built-in "q-list" component. Vue treats component names case-insensitively, which is why it interprets "q-list" and "QList" as the same component.

To resolve this issue, you can try renaming your QList component to another name that does not conflict with the Quasar component, such as "MyQList", or importing the Quasar "q-list" component using an alias.

From 'quasar' import { Qlist as QuasarList }