状态更改时更新 getter 值 Vuex 存储

Question

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

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

因此linedata，dates每当日期发生变化时，我的 getter都应该使用值进行更新。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 计算，返回计算数据。当反应性内容发生变化时，它们会自动更新。所以最好重新考虑设计，以便只更新状态。无论哪种方式，Vuex 都应该只更新动作/突变

鉴于您的示例和所有评论中的信息，使用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突变，但这将适用于您所拥有的。