时间戳

首页 > 解决方案 > 状态更改时更新 getter 值 Vuex 存储

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

问题描述

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

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

因此，每当日期更改时，我的 getterlinedata都应该使用值进行更新。是来自 VueX 商店的状态变量。问题是使用这种方法时，当我更改路线/转到不同的组件时，值不会正确更新。所以我认为最好使用 VueX 商店来做这种事情。datesdates

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);
    }

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

标签： vue.jsvuejs2vuex

解决方案

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突变，但这将适用于您所拥有的。

推荐阅读