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在我的示例中。