vuex mutation doesn't update DOM

Question

I'm rendering a list based on an object. I'm adding new elements to this object by help of the mutations. When I log this.$store.state.myObject to console, I can see that it is updating. However, my list is not updated.

Actually, I got lucky and I fixed this issue by adding the line of code below in my mutation. (I found out that this can help DOM update.)

But I'd like to learn if this is a good solution.

state.realms = Object.assign({}, state.realms)

Here is my whole mutation:

addToRealms: (state, val) => {
        var id = val.id
        var realmName = val.name.en_US
        state.realms[id] = { name: realmName }
        state.realms = Object.assign({}, state.realms)
        }

And here is my vue page code

<q-btn flat
  v-for="(realm,code) in realms"
  :key="code"
  @click="selectRealm(realm)"
  :label="realm.name"
  clickable/>

I defined realms as a computed property.

computed: {
realms () {
  return this.$store.state.realms
}

Further info: I use vue.js devtools extension, when I track my commit on vuex store I can see that I'm really changing the state. But It doesnt affect immediately. If I press commit all button, my list gets updated.

Thanks.

Raffobaffo Raffobaffo · Accepted Answer · 2020-07-07T11:40:43

When you use

state.realms = Object.assign({}, state.realms)

you basically are recreating a new object based on the previous one (breaking the references in case there are not nested objects), and that's the reason why in this way the list get updated.

Give a read to this article to understand more about deep-cloning and breaking references.

The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object

When you add new properties to the object, those are not reactive. To make them reactive, use the Vue.set() method, (docs here).

Vue.set(state.realms[id],'name', realmName);

vuex mutation doesn't update DOM

1 Answers