如何在状态更改时使用 mixin 更新图表？

Question

我已经使用 vuex 将 chartData 映射到状态属性。我想做的是在更新数据集时更新图表。 mixin 根据 documentation 自动在 chartData 上设置观察者，但我不确定如何将它与 vuex 一起使用。

LineChart.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);
  }
};

MarketChart.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 或以其他方式触发状态更改更新？

Answer 1

取决于您如何更改数据。如果只更改数据而不更改标签，则观察者可能无法识别更改。

一般情况下你可以一起使用vuex和vue-chartjs没有问题：这是一个示例回购协议：https://github.com/apertureless/vue-chartjs-vuex

不过vue-chartjs版本太旧了。但是概念是一样的。

如何在状态更改时使用 mixin 更新图表？

How to update chart using mixin on state change?

vue.js

vuex

vue-chartjs