Question

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

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

因此，每当日期更改时，我的getter linedata都应使用dates值进行更新。 dates是VueX存储中的状态变量。问题是使用这种方法，当我将路由/转到不同的组件时，值将无法正确更新。因此，我认为最好使用VueX商店来做这种事情。

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

字母通常用于获取，而不是用于设置。它们就像为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，但这将与您所拥有的一样。

Answer 2

这是一个针对用户的Vuex存储的简单示例。

export const state = () => ({
  user: {}
})

export const mutations = {
  set(state, user) {
    state.user = user
  },
  unset(state) {
    state.user = {}
  },
  patch(state, user) {
    state.user = Object.assign({}, state.user, user)
  }
}

export const actions = {
  async set({ commit }) {
      // TODO: Get user... 
      commit('set', user)
  },
  unset({ commit }) {
    commit('unset')
  },
  patch({ commit }, user) {
    commit('patch', user)
  }
}

export const getters = {
  get(state) {
    return state.user
  }
}

如果要设置用户数据，则可以在任何Vue实例中调用await this.$store.dispatch('user/set')。要修补数据，您可以调用this.$store.dispatch('user/patch', newUserData)。

然后在映射它的任何Vue实例中对吸气剂进行反应性更新。您应该在mapGetters属性中使用Vuex的函数computed。这是一个例子。

...
computed: {
  ...mapGetters({
    user: 'user/get'
  })
}
...

函数调用前的三个点...是destructuring assignment，它将把该函数在对象中返回的所有属性映射到计算的属性。每当您在用户商店上调用dispatch时，这些内容就会进行反应式更新。看看Vuex documentation进行更深入的说明。

状态更改时更新吸气剂值Vuex存储

2 个答案: