我得到以下警告,导致当我打开此路由时,组件需要一段时间才能加载,然后菜单仍然存在bug。[Vue warn]:超过了最大递归更新。这意味着您有一个React性效果,它正在改变自己的依赖项,从而递归地触发自己。可能的源包括组件模板,呈现函数,updated hook or watcher source function.我怀疑这可能是因为我们将数据存储在一个store变量中:
下面是我调用store并绘制rangeBar图的前端代码:
<template>
<q-page>
<div class="q-pa-md">
<VueApexCharts
v-if="!adquisicionStore.loading"
type="rangeBar"
height="200"
:options="chartOptions"
:series="chartSeries"
/>
</div>
</q-page>
</template>
<script setup>
import VueApexCharts from "vue3-apexcharts";
import { useAdquisicion } from "../stores/main";
import { ref, onMounted } from "vue";
const adquisicionStore = useAdquisicion();
const chartSeries = ref([
{
name: 'horno1',
data: [],
}
]);
const chartOptions = {
plotOptions: {
bar: {
horizontal: true,
barHeight: '20%'
}
},
xaxis: {
type: 'datetime'
},
stroke: {
width: 1
},
fill: {
type: 'solid',
opacity: 0.6
},
legend: {
position: 'top',
horizontalAlign: 'left'
}
};
onMounted(async () => {
await adquisicionStore.loadHornoMarcha();
updateChartSeries();
});
const updateChartSeries = () => {
// Make sure adquisicionStore.hornoMarcha is an array of data
chartSeries.value[0].data = adquisicionStore.hornoMarcha;
}
</script>
字符串
这就是商店:
import { defineStore } from 'pinia';
import axios from 'axios';
export const useAdquisicion = defineStore('adquisicion', {
state: () => ({
hornoMarcha: [],
loading: true
}),
actions: {
async loadHornoMarcha() {
try {
const responseHorMar = await axios.get('http://localhost:3000/horno-marcha');
if (responseHorMar.status === 200) {
this.hornoMarcha = responseHorMar.data;
this.loading = false;
} else {
console.error('Error al obtener datos: Respuesta no válida');
}
} catch (error) {
console.error('Error al obtener datos:', error);
}
},
},
});
型
我希望页面能快速加载,打开菜单时不会崩溃。
1条答案
按热度按时间qacovj5a1#
问题来自apexcharts插件以及它如何处理数组。解决方案是将toRaw放入:series。以删除React性。
字符串