Pinia InternalError: Quasar에서 q-list를 사용할 때 재귀 오류가 너무 많습니다.

Question

Quasar 구성 요소에서 Pinia Store를 사용하는 동안 InternalError: Too much recursion 오류가 발생했으며 제가 아는 모든 조치를 취했지만 수정하지 않았습니다.

여기서 조언을 받을 수 있나요?

이것은 QList 구성 요소를 호출하는 IndexPage.vue입니다.

<템플릿>
  <q-페이지>
      <div class="q-pa-md" style="최대 너비: 350px">
        <QList />
    </div>
  </q-페이지>
</템플릿>

<스크립트>
'src/comComponents/QList.vue'에서 QList를 가져옵니다.

기본값 내보내기 {
  구성요소: {
    QList
  }
}

<p>이것은 내 <code>QList.vue</code> 구성 요소입니다. </p>
<pre class="brush:php;toolbar:false;"><템플릿>
    <div v-if="loading">카레간도...</div>
    <q-list v-else 테두리 구분 기호>
        <q-item v-for="testData의 항목" :key="item.id" 클릭 가능한 V-리플>
            <q-item-section>{{ item.title }}</q-item-section>
        </q-item>
    </q-목록>
</템플릿>

<스크립트>
'../stores/teste'에서 { testeStore } 가져오기
'vue'에서 import { 정의 구성 요소, 계산, onMounted };

기본 정의 내보내기({
    설정 () {
        const store = testeStore();

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

        const testData = 계산(() =>store.getData());
        const loading = 계산(() =>store.$state.loading);

        반품 {
            테스트데이터,
            로드 중
        }

    }
})

<p>还有我的 <code>testeStore.js</code> 商店：</p>
<pre class="brush:php;toolbar:false;">'pinia'에서 { 정의 저장소 } 가져오기
'../assets/data/testes.json'에서 testeData 가져오기

const testeStore = 정의스토어({
  id: 'teste',
  상태: () => ({
    데이터: [],
    로드 중: 거짓,
  }),
  게터: {
    getData: 상태 => 상태.데이터,
  },
  작업: {
    로드데이터() {
      노력하다 {
        this.loading = true
        this.data = testeData;
      } 잡기(오류) {
        console.log(`고환 가져오기 오류: ${{ error }}`)
      } 마지막으로 {
        this.loading = 거짓
      }
    }

  }
})

당신은 여기에서 내 정보가 아닌 사실을 알고 있습니다.这是来自控system台的一段 vue warning：

[Vue 경고]: 스케줄러 플러시 실행 중 오류가 처리되지 않았습니다. 이는 Vue 내부 버그일 가능성이 높습니다. https://new-issue.vuejs.org/?repo=vuejs/core에서 문제를 열어주세요. 
  at <QList key=1 bordered="" 구분 기호 = "" > 
  at <QList key=1 bordered="" 구분 기호 = "" > 
  at <QList key=1 bordered="" 구분 기호 = "" > 
  at <QList key=1 bordered="" 구분 기호 = "" > 
  at <QList key=1 bordered="" 구분 기호 = "" > 
  at <QList key=1 bordered="" 구분 기호 = "" > 
  at <QList key=1 bordered="" 구분 기호 = "" > 
  at <QList key=1 bordered="" 구분 기호 = "" > 
  at <QList key=1 bordered="" 구분 기호 = "" > 
  at <QList key=1 bordered="" 구분 기호 = "" > 
  at <QList key=1 bordered="" 구분 기호 = "" > 
  at <QList key=1 bordered="" 구분 기호 = "" > 
  at <QList key=1 bordered="" 구분 기호 = "" > 
  at <QList key=1 bordered="" 구분 기호 = "" > 
  at <QList key=1 bordered="" 구분 기호 = "" > 
  at <QList key=1 bordered="" 구분 기호 = "" > 
  <QList key=1 bordered="" 구분 기호 = "" > 
  at <QList key=1 bordered="" 구분 기호 = "" > 
  at <QList key=1 bordered="" 구분 기호 = "" > 
  at <QList key=1 bordered="" 구분 기호 = "" > 
  at <QList key=1 bordered="" 구분 기호 = "" >

Answer 1

방금 stackblitz를 확인한 결과 자신의 QList 구성 요소와 Quasar의 내장 "q-list" 구성 요소 사이에 이름 지정 충돌이 있는 것 같습니다. Vue는 구성 요소 이름을 대소문자를 구분하지 않고 처리하므로 "q-list"와 "QList"를 동일한 구성 요소로 해석합니다.

이 문제를 해결하려면 QList 구성 요소의 이름을 "MyQList"와 같이 Quasar 구성 요소와 충돌하지 않는 다른 이름으로 바꾸거나 별칭을 사용하여 Quasar "q-list" 구성 요소를 가져올 수 있습니다.

从 'quasar' 导入 { Qlist as QuasarList }