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 docs你可以阅读：

在 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。