Question

我正在尝试从vuex商店更新highcharts数据，但问题是，触发click事件时，vuex商店状态中的数据发生了突变，但仅在我做一些修改时反映在我的highcharts组件中更改代码并保存更改。

我正在使用Vue和Highcharts在仪表板上工作。

<template>
  <div>
    <vue-highcharts :options="options" ref="lineCharts"></vue-highcharts>
    <v-btn>{{parts}}</v-btn>
  </div>
</template>

<script>
import VueHighcharts from 'vue2-highcharts';
import Vue from 'vue';

export default {

  components: {
    VueHighcharts,

  },
  data() {
    return {

      options: {
        chart: {
          type: 'spline',
          title: 'Hassaan',
        },
        xAxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        },
        yAxis: {
          title: {
            text: '',
          },
          labels: {
            formatter() {
              return `${this.value}°`;
            },
          },
        },
        tooltip: {
          crosshairs: true,
          shared: true,
        },
        credits: {
          enabled: false,
        },
        plotOptions: {
          spline: {
            marker: {
              radius: 4,
              lineColor: '#666666',
              lineWidth: 1,
            },
          },
        },
        series: [],
      },
    };
  },


  created() {
    Vue.set(this.options, 'series', this.$store.state.parts);
  },

};
</script>

我希望在不更改代码并保存的情况下更新数据。

Answer 1

您应该使用computed从商店中获取具有反应性的值，这样就不再需要created钩子。同样，您永远不要直接通过状态从存储中访问值，而应该创建一个getter。

我不确定您要做什么，但这应该是正确的结构。如果只想设置this.options.series = this.$store.getters.parts。就像您已经在使用Vue.set(this.options, 'series', this.$store.state.parts)一样，在这种情况下，为计算的属性添加一个监视程序并设置新的属性值。

{
  watch: {
    parts (updatedParts) {
      this.series.parts = updatedParts;
    }
  },
  computed: {
    parts () {
      return this.$store.getters.parts;
    }
  }
}

Vuejs数据更新

1 个答案: