Pinia InternalError: слишком много ошибок рекурсии при использовании q-list в Quasar

Я застрял на этой ошибке InternalError: too much recursion при использовании магазина Pinia в моем компоненте Quasar, я сделал все, что знаю об этом, ничего не решилось.
Могу ли я получить консультацию здесь?

Вот мой IndexPage.vue, где я вызываю компонент QList:

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

Вот мой компонент QList.vue:

<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.info(`Error fetching testes: ${{ error }}`)
      } finally {
        this.loading = false
      }
    }

  }
})

Каждый компонент выглядит нормально, я действительно не знаю, в чем моя проблема. Вот фрагмент предупреждения vue из консоли:

[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 = "" > 

Вероятно, это не связано, но getData - это геттер, а не функция, поэтому const testData = computed(() => store.getData()); должен выдать вам «Uncaught TypeError: store.getData не является функцией»

Moritz Ringler 08.04.2023 18:06

@tao это решение не сработало, у меня все еще есть ошибка. setup () { const store = testeStore(); const { data, loading } = storeToRefs(store) return { data, loading } } Мой testData не undefined, я получаю данные, если использую консоль внутри своего магазина.

Lucas Marra 08.04.2023 22:27

Сможете ли вы воспроизвести ошибку в codeandbox? Используйте импортировать проект.

tao 09.04.2023 01:12

Я пометил вопрос как дубликат, потому что у него такое же предупреждающее сообщение, и вы указали в своем вопросе, что уже пробовали это, и это не сработало. Вы должны задокументировать свое исследование. Пожалуйста, прочтите сколько усилий требуется от пользователей Stack Overflow.

tao 09.04.2023 01:23
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
5
74
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Только что проверил stackblitz, и похоже, что у вас конфликт имен между вашим собственным компонентом QList и встроенным компонентом «q-list» Quasar. Vue обрабатывает имена компонентов без учета регистра, поэтому он интерпретирует как «q-list», так и «QList» как один и тот же компонент.

Чтобы решить эту проблему, вы можете либо попробовать переименовать свой собственный компонент QList во что-то другое, что не конфликтует с компонентом Quasar, например MyQList, либо вместо этого импортировать компонент Quasar q-list с псевдонимом.

import { Qlist as QuasarList } from 'quasar'

Это немного грустно с моей стороны, но это решение сработало как шарм. Действительно, я изменил свой компонент на MyQList, и он отлично работает. Большое спасибо.

Lucas Marra 09.04.2023 17:45

Другие вопросы по теме