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

Question

我已经使用 vuex 将chartData映射到状态属性。我想做的是在更新数据集时更新图表。mixin 根据文档自动在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 与映射的状态变量一起使用或以其他方式触发状态更改的更新？

Answer 1

取决于更改数据的方式。 如果只有数据更改而不更改标签，则观察程序可能无法识别更改。

一般来说，你可以一起使用 vuex 和 vue-chartjs 而不会出现问题： 下面是一个示例存储库：https://github.com/apertureless/vue-chartjs-vuex

然而，vue-chartjs版本是旧的。但概念是一样的。