Vuejs数据更新

Question

我正在尝试更新vuex商店中的高级图表数据，但问题是，当触发单击事件时，vuex存储状态中的数据会发生变异，但只有当我对代码进行一些更改并保存更改时，它才会反映在我的High图表组件中。

我正在使用Vue和High曲线图开发仪表板。。

<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;
    }
  }
}