'Nuxt vuex computed getters is not changing

The problem is that inside the component, the computed property works, but the same computed property written the same way on the page returns an empty object.

state:

export const state = () => ({
  mapAddress: {},
})

Getter:

  getMapAddress: state => {
    return state.mapAddress
  },

computed: {
 mapAddress() {
    return this.$store.getters.getMapAddress;
 }
}

Setter:

setMapAddress(state, {id, address}) {
    state.mapAddress[id] = address
  },

In component:

this.$store.commit("setMapAddress", {
   id: mker.id, 
   address: addressResult
});

I think that error cuz need to use this.$set() but how i can use it on nuxt vuex mutation?

nuxt.jsvuex


Solution 1:[1]

setMapAddress(state, { id, address }) {
    this._vm.$set(state.mapAddress, id, address)
},

Solution 2:[2]

Instead of this computed property you can use the mapState method from Vuex:

  import { mapState } from 'Vuex'

  computed: {
    ...mapState({
      mapAddress: (state) => state.mapAddress
    })
  }

Solution 3:[3]

you need to use mapgetters. try this:

computed: {
    
   ...mapGetters({ mapAddress: 'YOUR_STORE_NAME/getMapAddress' })
     
}

Solution 4:[4]

If you want to make it reactive, you need to use Vue.set in your setter:

import Vue from 'vue';

// ...

setMapAddress (state, { id, address }) {
  Vue.set(state.mapAddress, id, address);
},

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tyler2P
Solution 2 thebyteland
Solution 3 cancirkin
Solution 4 Tristan

Related Questions