Pinia InternalError : trop d'erreurs de récursion lors de l'utilisation de q-list dans Quasar

Question

Lors de l'utilisation de Pinia Store dans mon composant Quasar, j'ai rencontré cette erreur InternalError: Too much récursion et j'ai fait tout ce que je savais mais pas de correctif.

Puis-je avoir des conseils ici ?

Voici mon IndexPage.vue où j'appelle le composant QList :

<template>
  <page q>
      <div class="q-pa-md" style="largeur maximale : 350px">
        <QListe />
    </div>
  </q-page>
</modèle>

<script>
importer QList depuis 'src/components/QList.vue' ;

exporter par défaut {
  Composants: {
    Liste Q
  }
}
</script>

Voici mon composant QList.vue

<template>
    <div v-if="chargement">Carregando...</div>
    <q-list v-else séparateur bordé>
        <q-item v-for="élément dans testData" :key="item.id" v-ondulation cliquable>
            <q-item-section>{{ item.title }}</q-item-section>
        </q-item>
    </q-list>
</modèle>

<script>
importer { testeStore } depuis '../stores/teste'
importer { définirComponent, calculé, onMounted } depuis 'vue' ;

exporter le composant défini par défaut ({
    installation () {
        const store = testeStore();

        onMounted(() => {
            store.loadData();
        });

        const testData = calculated(() => store.getData());
        const chargement = calculé(() => store.$state.loading);

        retour {
            données de test,
            chargement
        }

    }
})
</script>

还有我的 testeStore.js 商店：

importer { definitionStore } depuis 'pinia'
importer testeData depuis '../assets/data/testes.json'

export const testeStore = définirStore({
  identifiant : 'teste',
  état : () => ({
    données: [],
    chargement : faux,
  }),
  getteurs : {
    getData : état => state.data,
  },
  Actions: {
    chargerData () {
      essayer {
        this.loading = vrai
        this.data = testeData ;
      } attraper (erreur) {
        console.log(`Erreur lors de la récupération des testicules : ${{ erreur }}`)
      } enfin {
        this.loading = faux
      }
    }

  }
})</pré>
<p>这是来自控制台的一段 vue warn：</p>
<pre class="brush:php;toolbar:false;">[Vue warn] : erreur non gérée lors de l'exécution du vidage du planificateur. Il s'agit probablement d'un bug interne de Vue. Veuillez ouvrir un numéro sur https://new-issue.vuejs.org/?repo=vuejs/core 
  à <QList key=1 bordered="" séparateur="" > 
  à <QList key=1 bordered="" séparateur="" > 
  à <QList key=1 bordered="" séparateur="" > 
  à <QList key=1 bordered="" séparateur="" > 
  à <QList key=1 bordered="" séparateur="" > 
  à <QList key=1 bordered="" séparateur="" > 
  à <QList key=1 bordered="" séparateur="" > 
  à <QList key=1 bordered="" séparateur="" > 
  à <QList key=1 bordered="" séparateur="" > 
  à <QList key=1 bordered="" séparateur="" > 
  à <QList key=1 bordered="" séparateur="" > 
  à <QList key=1 bordered="" séparateur="" > 
  à <QList key=1 bordered="" séparateur="" > 
  à <QList key=1 bordered="" séparateur="" > 
  à <QList key=1 bordered="" séparateur="" > 
  à <QList key=1 bordered="" séparateur="" > 
  à <QList key=1 bordered="" séparateur="" > 
  à <QList key=1 bordered="" séparateur="" > 
  à <QList key=1 bordered="" séparateur="" > 
  à <QList key=1 bordered="" séparateur="" > 
  à <QList key=1 bordered="" séparateur="" >

Answer 1

Je viens de vérifier stackblitz et il semble qu'il y ait un conflit de nom entre votre propre composant QList et le composant "q-list" intégré de Quasar. Vue traite les noms de composants sans tenir compte de la casse, c'est pourquoi il interprète "q-list" et "QList" comme le même composant.

Pour résoudre ce problème, vous pouvez essayer de renommer votre composant QList sous un autre nom qui n'entre pas en conflit avec le composant Quasar, tel que "MyQList", ou utiliser un alias pour importer le composant Quasar "q-list".

从 'quasar' 导入 { Qlist as QuasarList }