0

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);
        }
      },

  },
  
});

1 respuesta 1

1

El error viene del plugin apexcharts y como manejas los arrays ya que los pasa como reactivos y eso provoca el error. La solución a eso fue agregar toRaw a :series para quitarles la reactividad a la array.

<template>
  <q-page>
    <div class="q-pa-md">
      <VueApexCharts
        type="rangeBar"
        :height="200"
        :options="chartOptions"
        :series="toRaw(chartSeries)"
      />
    </div>
  </q-page>
</template>

<script setup>
import VueApexCharts from 'vue3-apexcharts';
import { useAdquisicion } from "../stores/example-store";
import { ref, onMounted, toRaw } from "vue";

const adquisicionStore = useAdquisicion();

const chartSeries = ref([]); // Ahora es un array vacío para los datos

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'
    }
  };

const fetchHornoMarcha = async () => {
  try {
    const response = await adquisicionStore.loadHornoMarcha();
    console.log
    // Asigna los datos a chartSeries
    chartSeries.value = [{
      data: response
    }];
  } catch (error) {
    console.error("Error al cargar datos:", error);
  }
};

onMounted(async () => {
  await fetchHornoMarcha();
});

</script>

<style scoped>
#time-chart {
  width: 100%;
}
</style>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.