在 Vuex 中使用状态值更改 getter 值

Question

我有这个获取状态中一项的值的getter：

boxdata: state => {
      return state.boxchart.data
    },

现在我有另一个状态项用于更改 getter 的值

目前我在安装组件时执行此操作，但似乎数据有时会加载但有时不会：

computed: {
      ...mapGetters(["boxdata"]),
      ...mapState(['reference_fc'])
    },

mounted() {
 this.boxdata[0].chartOptions.series[0].data[0]=this.reference_fc.NSR.values
}

所以我想知道如何确保 boxdata getter 在组件第一次加载时已经更新？

Answer 1

Vue 无法检测数组元素分配。这在Caveats 中有解释。

试试这个：

this.$set(this.boxdata[0].chartOptions.series[0].data, 0, this.reference_fc.NSR.values)

Answer 2

您不应该使用 getter 来改变数据。你应该使用mutations。

Getter 仅用于根据存储状态获取派生状态。 see here

在你的店里：

mutations: {
  setBoxdata(state, value) {
     state.boxchart.data[0].chartOptions.series[0].data[0] = value;
  }
}

在你的组件中：

computed: {
  ...mapMutations("setBoxdata")
},
mounted() {
  this.setBoxData(this.reference_fc.NSR.values);
}