CODEWITHSUNDEEP
vuejs2vuex
Yogesh.galav
Yogesh.galav

Reputation: 285

Vuex state update is not updating DOM

I have an array of objects in state

  hostInstances :  []

And an computed property

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

which initially show exact number of objects but if I push new object state change is showed in vuedev tools but computed property doesn't change.

I even tried getter via computed property

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

and directly in dom

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

but it doesn't updated the dom.

Upvotes: 0

Views: 1465

Answers (2)

rjcarl
rjcarl

Reputation: 742

You don't need getters as you don't transform your state. You can just fetch it directly from the store using mapState of Vuex. You must also modify the state through mutations only if you're not using one.

import { mapState } from 'vuex';

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

and in your store...

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

Upvotes: 1

Marc
Marc

Reputation: 5455

Map your state to computed.

<template>

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

</template>

<script>

import { mapState } from `vuex`

export default {

  computed: {

      ...mapState(['hostInstances'])

  }


}

</script>

Upvotes: 2

Related Questions