Buenas me sale el siguiente warning el cual provoca que cuando abro esta ruta el componente tarda en cargar y luego se queda bugeado el menu. [Vue warn]: Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function. Lo que sospecho es que puede ser por que almacenos los datos en una variable de store:
Aqui el codigo del front en el cual llamo a la store y pinto una grafica de rangeBar:
<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>
Y este es la store:
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);
}
},
},
});