Nuxt 使用 vuex 操作获取数据，但在商店 getter 中返回未定义

如何解决Nuxt 使用 vuex 操作获取数据，但在商店 getter 中返回未定义

我的提取遇到问题，商店返回未定义的操作

component.js

export default: {
...
async fetch({ store,route }) {
    await store.dispatch('calendar/getDetailSportingEvents',{
      type: route.params.context,id: route.params.id
    })
  },computed: {
  ...mapGetters({
    data: 'calendar/getData' //loads in server side but on client it returns {}
  })
 }
...
}

store/calendar.js

const state = () = ({
 data: {}
})

const getters = {
 getData(state) {
  return state.data
 }
}

const mutations = {
 updateData(state,payload) {
  state.data = payload
 }
}

const actions = {
  async getDetailSportingEvents(context,{type,id}) {
      try {
        const data = await this.$axios
          .$get(`apiUrlString`)
          await context.commit('setCalendarEvent',data)
      } catch (err) {
      }
    }
}

export default { state,getters,mutations,actions }

它设法在服务器端调用，因为我可以看到正在传递数据的日志以及内容的呈现。但是，当应用程序完全加载一秒钟后，它就会消失，导致 mapGetter 将有效负载数据返回到默认值 {}，我有一个 v-if 来检查返回值是否为 null 或空Object

之所以这样设置，是因为我有一个刷新按钮，可以调用this.$fetch()方法获取最新数据

任何帮助将不胜感激

解决方法

在您的 store/calendar.js 商店中的 getDetailSportingEvents 操作中，它提交了一个名为“setCalendarEvent”的变更，但在您的变更中，只存在一个名为“updateData”，所以，也许看看你的代码？我不知道，我只是按照你发布的内容去做。