vue.js - 状态更改时更新 getter 值 Vuex 存储

Question

我试图弄清楚当 VueX 中的其他一些变量更改/更新时如何正确更新 getter 值。
目前我在组件中使用这种方式进行更新:

watch: {
   dates () {
     this.$set(this.linedata[0].chartOptions.xAxis,"categories",this.dates)
   }
}

所以我的 setter/getter linedata应该更新为 dates日期更改时的值。 dates是来自 VueX 商店的状态变量。
问题是使用此方法时，当我更改路由/转到不同组件时，该值将无法正确更新。所以我觉得用VueX store做这种事情比较好。
dates使用 API 调用更新，因此我使用操作来更新它。
所以问题是我怎样才能从 VueX 商店进行这样的更新？

编辑:

我尝试将其移至 VueX:

async loadData({ commit }) {
      let response = await Api().get("/cpu");
      commit("SET_DATA", {
       this.linedata[0].chartOptions.xAxis,"categories": response.data.dates1,
this.linedata[1].chartOptions.xAxis,"categories": response.data.dates2
      });
    }

 SET_DATA(state, payload) {
      state = Object.assign(state, payload);
    }

但以上不起作用，因为我无法以这种方式设置嵌套对象......

Answer 1

getter 通常用于获取，而不是设置。它们就像为 Vuex 计算，返回计算数据。当 react 性内容发生变化时，它们会自动更新。所以最好重新考虑设计，以便只更新状态。无论哪种方式，Vuex 都应该只更新 Action /突变
根据您的示例和所有评论中的信息，使用 linedata作为状态，您的操作和突变将如下所示:

actions: {
  async loadData({ commit }) {
    let response = await Api().get("/cpu");
    commit('SET_DATA', response.data.dates);
  }
}

mutations: {
  SET_DATA(state, dates) {
    Vue.set(state.linedata[0].chartOptions.xAxis, 'categories', dates[0]);
    Vue.set(state.linedata[1].chartOptions.xAxis, 'categories', dates[1]);
  }
}

例如，您可以在组件中调用它，例如:

this.$store.dispatch('loadData');

使用 Vue.set在这种情况下，更改检测是必需的，并且需要以下导入:

import Vue from 'vue';

理论上，应该有更好的方法来设计你的后端 API，这样你就可以设置 state.linedata = payload在突变中，但这将适用于您所拥有的。