Vue.js 无法更改Nuxtjs data（）变量

我有一个简单的nuxt/vue应用程序。它使用API来调用过滤器和数据，但fetch钩子不会更改变量。这是我的密码：

data() {
    return {
      filters: {},
      fulldata: [],
      filterName: '',
    }
  },

  async fetch({app}) {
    app.$axios.$get('/api/oklevelek').then(data => {
      this.fulldata = data
      this.filters = data.possibleFilters
      console.log(this.fulldata) //data shows
    })
    console.log('adatok')
    console.log(this.fulldata) //undefined
  },

  fetchOnServer: true,
  methods: {
    test() { //test method for data
      console.log('test')
      console.log(this.fulldata) //undefined
    },
  },

---

谢谢你的时间，感谢你的帮助

您需要等待fetch呼叫的响应。目前，您正在尝试在调用api后立即console.log

this.fulldata

，然后数据才有机会返回

async fetch({app}) {
  app.$axios.$get('/api/oklevelek').then(data => {
    this.fulldata = data
    this.filters = data.possibleFilters
    console.log(this.fulldata) //data shows
  })
  console.log('adatok')
  // this runs immediately after the api call
  console.log(this.fulldata) //undefined
}

这将有助于：

async fetch({app}) {
  // add await here
  let { data } = await app.$axios.$get('/api/oklevelek')
  // now this code waits for the api call to finish
  this.fulldata = data
  this.filters = data.possibleFilters
  console.log(this.fulldata)
  console.log('adatok')
  console.log(this.fulldata)
}

---

我试图解决你的问题。我不明白为什么它不起作用。。。真的应该这样。我为我的测试创建了这个沙盒：我也尝试使用该商店，但我无法。。。(). 由于fetch已被弃用，我建议您使用asyncData或在mounted（）事件而不是fetch（）事件上获取数据。