Nuxt vuex computed getters 没有改变

Question

问题是在组件内部，计算的属性有效，但是相同的计算属性在页面上以相同的方式编写 returns 一个空对象。

状态：

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
  },

在组件中：

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

我认为错误是因为需要使用 this.$set() 但我如何在 nuxt vuex 突变上使用它？

Answer 1

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

Answer 2

您可以使用 Vuex 中的 mapState 方法代替此计算属性：

  import { mapState } from 'Vuex'

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

Answer 3

您需要使用 mapgetter。试试这个：

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

Answer 4

如果你想让它响应，你需要在你的 setter:

中使用 Vue.set

import Vue from 'vue';

// ...

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

Nuxt vuex computed getters is not changing