VueJS реактивность: Заменить массив данными

Question

Я все еще не понимаю, почему одни способы изменения данных работают, а другие нет. Я пробовал этот пример:

    watch: {
      '$store.state.linedata': function() {this.redraw()}
    },
    methods: {
      redraw() {
        this.chartOptions.series[0].data = this.$store.state.linedata
      }
    },
    data() {
      return {
        chartOptions: {
          chart: {
            type: this.type
          },
          series: [{
            data: this.$store.state.linedata,
            name: "Test Series",
            color: this.color
          }]
        }
      }
  }

Эта настройка работает, всякий раз, когда я меняю linedata в моем магазине, компонент обновляется. Однако для меня было бы более интуитивно понятно обновлять такие данные, не ссылаясь на this.chartOptions.series[0].data:

  redraw() {
    this.$store.state.linedata = [1,2,3,4,5,6]
  }

Это обновит состояние правильно, но не приведет к обновлению компонента новыми данными. . Почему второй способ не работает и является ли мой первый способ правильным? Мне кажется, что я неправильно понимаю здесь некую основную концепцию. Как будет выглядеть лучшая практика?

Спасибо!

Answer 1

Из документации Vuex вы можете прочитать:

Единственный способ изменить состояние в хранилище Vuex - это совершить мутацию

Значит, не надо пытаться делать this.$store.state.linedata = [1,2,3,4,5,6]. Кстати, это может вызвать ошибку в зависимости от ваших настроек Vuex в консоли. Вместо этого создайте такую ​​мутацию:

mutations: {
  updateLineDate(state, lineDate) {
    state.lineData = lineData;
  }
}

А затем вызовите:

this.$store.commit("updateLineDate", [1, 2, 3, 4, 5, 6]);

Чтобы автоматически обновлять данные вашей диаграммы, я бы предложил создать вычисляемое свойство в вашем Vue компоненте. . Чтобы он реагировал на изменения, сопоставьте свой атрибут с помощью mapState:

import { mapState } from "vuex";

// ...

computed: {
  ...mapState("lineData"),
  chartData() {
    return {
      chart: {
        type: this.type
      },
      series: [{
        data: this.lineData,
        name: "Test Series",
        color: this.color
      }]
    }
  }
}

Затем не забудьте указать chartData для компонента диаграммы вместо chartOptions в моем примере.