当状态改变时如何更新图表？

Question

我已经使用vuex将chartData映射到状态属性。我想做的是在更新数据集时更新图表。我听说可以用mixin或观察程序来完成，但是我不知道如何实现。我知道mixins会创建一个观察者，但我不知道在vuex中如何使用它。

Chartline.vue：

<script>
import { Line } from 'vue-chartjs'
import { mapState } from 'vuex'

export default {
  name: 'ChartLine',
  extends: Line,
    computed:{
      ...mapState(['charData','options'])
    },
    methods:{
      regraph: function(){
        this.renderChart(this.charData,this.options);
      }
    },
    mounted () {
      this.regraph();
    },
    watch: {
    }
}
</script>

Pension.vue：

<template>
  <div id='pension' class="navbarPar">
    <ChartLine/> 
  </div>
</template>

<script>
import ChartLine from '../components/ChartLine.vue';
import { mapState } from 'vuex'
//import { Line } from 'vue-chartjs'

export default {
  name: 'Pension',
  components: {
    ChartLine,
  },
  data(){
    return{
      form: {
        ...
      },
      var:{
        ...
      },
    }
  },
  methods: {

    calculate: function(indice){
      ...
      //modify data of mapState
      //after here, I want to rerender chart
      }
  },
  computed:{
    ...mapState(['charData','options']),

  },
}
</script>

Answer 1

使用这样的观察者应该足够了：

<script>
import { Line } from "vue-chartjs";
import { mapState } from "vuex";

export default {
  name: "ChartLine",
  extends: Line,
  computed: {
    ...mapState(["chartData", "options"])
  },
  methods: {
    regraph() {
      this.renderChart(this.chartData, this.options);
    }
  },
  mounted() {
    this.regraph();
  },
  watch: {
    chartData: {
      handler: this.regraph,
      deep: true
    }
  }
};
</script>

而且在ChartLine组件内部具有显式的vuex状态映射似乎有点浪费-通过props传递vuex数据会使该组件更加通用：

<template>
  <div id='pension' class="navbarPar">
    <ChartLine :options="options" :chart-data="chartData"/> 
  </div>
</template>
<script>...

Chartline.vue：

<script>
import { Line } from "vue-chartjs";

export default {
  name: "ChartLine",
  extends: Line,
  props: {
    options: {
      type: Object,
      default: () => ({})
    },
    chartData: {
      type: Object /*is it?*/,
      default: () => ({})
    }
  },
  methods: {
    regraph() {
      this.renderChart(this.chartData, this.options);
    }
  },
  mounted() {
    this.regraph();
  },
  watch: {
    chartData: {
      handler: this.regraph,
      deep: true
    }
  }
};
</script>

Answer 2

如果您使用的是vue-chartjs，该库具有处理图表中反应数据的方法：

// ChartLine.js
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'], // passed from the parent
  mounted () {
    // this.chartData is created in the mixin (pass it as any prop with :chart-data="data").
    this.renderChart(this.chartData, this.options)
  }
}

现在是Pension.vue文件

// Pension.vue
<template>
  <div id='pension' class="navbarPar">
    <ChartLine :chart-data="charData" :options="options" /> 
  </div>
</template>

<script>
  import ChartLine from '../components/ChartLine';
  import { mapState } from 'vuex'

  export default {
    name: 'Pension',
    components: {
      ChartLine,
    },
    data(){
      return{
        form: {
          ...
        },
        var:{
          ...
        },
      }
    },
    methods: {
      calculate: function(indice){
      ...
      //modify data of mapState
      //after here, I want to rerender chart
      }
    },
    computed:{
      ...mapState(['charData','options']),
    },
  }
</script>

您可以在此处了解更多信息：https://vue-chartjs.org/guide/#updating-charts，有一些警告