Обновление данных Vuejs

Question

Я пытаюсь обновить данные highcharts из хранилища vuex, но проблема в том, что при срабатывании события 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. Кроме того, вы никогда не должны получать доступ к значениям из вашего магазина напрямую через штат, вместо этого создавайте геттер.

Я не уверен, что вы пытаетесь сделать, однако это должна быть правильная структура. Если вы хотите установить 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;
    }
  }
}