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

【问题标题】：How to update chart using mixin on state change?如何在状态更改时使用 mixin 更新图表？
【发布时间】：2018-08-09 06:29:06
【问题描述】：

我已经使用 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 与映射的状态变量一起使用或以其他方式触发状态更改的更新？

【问题讨论】：

在LineChart.js中，props应该是props: ["options", "chartData"]
@ittus 根据文档// this.chartData is created in the mixin. 但无论如何添加它并不能解决问题。
数据变化时是否触发chart:update事件？
@Ricky 我将v-on:chart:update="test" 添加到图表组件<line-chart> 以及test() 方法。未发出任何事件。

标签： vue.js vuex vue-chartjs

【解决方案1】：

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

一般你可以一起使用 vuex 和 vue-chartjs 没有问题：这是一个示例 repo：https://github.com/apertureless/vue-chartjs-vuex

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

【讨论】：

我将数据集和选项移动到 MarketChart.vue 中的 computed()，因此数据状态属性没有嵌套并使用 mapGetters 和 mapActions（就像您发布的 repo 示例中一样）和它现在正在工作。