Я застрял на этой ошибке 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 = "" >
@tao это решение не сработало, у меня все еще есть ошибка. setup () { const store = testeStore(); const { data, loading } = storeToRefs(store) return { data, loading } }
Мой testData
не undefined
, я получаю данные, если использую консоль внутри своего магазина.
Сможете ли вы воспроизвести ошибку в codeandbox? Используйте импортировать проект.
@tao не работает с CodeSandBox, возможно, проблема с ESLint: codeandbox.io/s/github/lucaspmarra/frontend-pleno/tree/… StackBlitz выдает ту же ошибку, что и локальный проект: stackblitz.com/github/ lucaspmarra/frontend-pleno/дерево/…
Я пометил вопрос как дубликат, потому что у него такое же предупреждающее сообщение, и вы указали в своем вопросе, что уже пробовали это, и это не сработало. Вы должны задокументировать свое исследование. Пожалуйста, прочтите сколько усилий требуется от пользователей Stack Overflow.
Только что проверил stackblitz, и похоже, что у вас конфликт имен между вашим собственным компонентом QList и встроенным компонентом «q-list» Quasar. Vue обрабатывает имена компонентов без учета регистра, поэтому он интерпретирует как «q-list», так и «QList» как один и тот же компонент.
Чтобы решить эту проблему, вы можете либо попробовать переименовать свой собственный компонент QList во что-то другое, что не конфликтует с компонентом Quasar, например MyQList, либо вместо этого импортировать компонент Quasar q-list с псевдонимом.
import { Qlist as QuasarList } from 'quasar'
Это немного грустно с моей стороны, но это решение сработало как шарм. Действительно, я изменил свой компонент на MyQList, и он отлично работает. Большое спасибо.
Вероятно, это не связано, но
getData
- это геттер, а не функция, поэтомуconst testData = computed(() => store.getData());
должен выдать вам «Uncaught TypeError: store.getData не является функцией»