Обновление состояния Vuex не обновляет DOM

Question

У меня есть массив объектов в состоянии

  hostInstances :  []

И вычисленное свойство

getHostInstances(){
  return this.$store.state.hostInstances
}

, которое изначально показывает точное количество объектов, но если я pu sh новое состояние объекта изменение отображается в инструментах vuedev, но вычисляемое свойство не меняется.

Я даже пробовал получить метод через вычисляемое свойство

  ...mapGetters(['getHostInstances' ]);

и непосредственно в dom

v-for="instance in $store.getters.getHostInstances"

, но он не обновляет дом.

Answer 1

Сопоставьте state с computed.

<template>

  <div v-for="instance in hostInstances">{{ instance }}</div>

</template>

<script>

import { mapState } from `vuex`

export default {

  computed: {

      ...mapState(['hostInstances'])

  }


}

</script>

Answer 2

Вам не нужны геттеры, поскольку вы не трансформируете свое состояние. Вы можете просто получить его прямо из магазина, используя mapState Vuex. Вы также должны изменять состояние посредством мутаций, только если вы его не используете.

import { mapState } from 'vuex';

...
computed: {
   ...mapState(['hostInstances'])
},
methods: {
  addHostInstance() {
    this.$store.dispatch('addHostInstanceAction', yourHostInstanceObj);
  }
}

и в вашем магазине ...

export default new Vuex.Store({
  state: {...}
  actions: {
    addHostInstanceAction({commit}, payload) {
      commit('mutateInstances', payload);
    }
  },
  mutations: {
    mutateInstances(state, payload) {
      state.hostInstances.push(payload);
    }
  }
})