Обновление значения получателя Vuex store при изменении состояния

Question

Я пытаюсь выяснить, как правильно обновить значение получателя при изменении / обновлении какой-либо другой переменной из VueX. В настоящее время я использую этот способ в компоненте для обновления:

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

Так что мой метод получения linedata должен обновляться со значением dates при изменении даты. dates - это переменная состояния из хранилища VueX. Дело в том, что с этим методом значение не будет корректно обновляться, когда я изменил route / go на другие компоненты. Поэтому я думаю, что лучше делать такие вещи с помощью магазина 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: {
  asnyc 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
  }
}

Если вы хотите установить пользовательские данные, вы можете вызвать await this.$store.dispatch('user/set') в любом Vue экземпляре. Для исправления данных вы можете позвонить this.$store.dispatch('user/patch', newUserData).

Получатель затем реактивно обновляется в любом экземпляре Vue, где он отображается. Вам следует использовать функцию mapGetters из Vuex в свойствах computed. Вот пример.

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

Три точки ... перед вызовом функции деструктурирующее присвоение , которое отобразит все свойства, которые функция вернет в объекте, для вычисления свойства. Затем они будут оперативно обновляться всякий раз, когда вы звоните dispatch в хранилище пользователя. Взгляните на документацию Vuex для более подробного объяснения.