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 store 中真正改变状态的唯一方法是提交一个 mutation

这意味着你不应该尝试做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在我的示例中。