상태 변경 시 믹스인을 사용하여 차트를 업데이트하는 방법은 무엇입니까?

상태 변경 시 믹스인을 사용하여 차트를 업데이트하는 방법은 무엇입니까?

지도를 만들었습니다.chartDatavuex를 사용하여 상태 속성으로 이동합니다.제가 하고 싶은 것은 데이터 세트가 업데이트될 때 차트를 업데이트하는 것입니다.믹스인은 자동으로 감시자를 설정합니다.chartData설명서에 따르면 vuex와 함께 사용하는 방법을 잘 모르겠습니다.

라인 차트.js:

import { Line, mixins } from "vue-chartjs";
const { reactiveProp } = mixins;

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ["options"],
  mounted() {
    this.renderChart(this.chartData, this.options);
  }
};

시장 차트.vue:

<template>
  <div>
    <line-chart :chart-data=chartData :height=height :options=options></line-chart>
  </div>
</template>

<script>

import LineChart from "./LineChart.js";
import { mapGetters, mapState } from "vuex";

export default {
  components: {
    LineChart
  },
  data() {
    return {
      height: 200
    };
  },
  computed: {
    ...mapState({
      chartData: "chartData",
      options: "chartOptions"
    })
  }
};
</script>

저장 데이터 경로는chartData.datasets[i].data.

차트가 처음에는 올바르게 렌더링되고 데이터가 상태에서 올바르게 업데이트된 것으로 알고 있습니다(상태를 업데이트한 후 개발에서 핫 다시 로드를 트리거하면 차트가 업데이트된 데이터로 다시 렌더링됨). 그러나 차트는 업데이트되지 않습니다.매핑된 상태 변수와 함께 mixin을 사용하거나 상태 변경에 대한 업데이트를 트리거하려면 어떻게 해야 합니까?

데이터를 변경하는 방법에 따라 다릅니다.데이터만 변경되고 레이블은 변경되지 않으면 관찰자가 변경을 인식하지 못할 수 있습니다.

일반적으로 vuex와 vue-chartjs를 함께 사용하면 문제가 없습니다.다음은 repo의 예입니다. https://github.com/apertureless/vue-chartjs-vuex

그러나 vue-chartjs 버전은 이전 버전입니다.하지만 그 개념은 같습니다.

언급URL : https://stackoverflow.com/questions/51760202/how-to-update-chart-using-mixin-on-state-change