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。

VueJS反应性：用数据替换数组

1 个答案: