Nuxtjs data() 变量不能改变答案

【问题标题】：Nuxtjs data() variable cannot changeNuxtjs data() 变量不能改变
【发布时间】：2020-11-07 00:28:22
【问题描述】：

我有一个简单的 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
    },
  },

感谢您的宝贵时间并感谢您的帮助！

【问题讨论】：

我试图解决你的问题。我不明白为什么它不起作用......它真的应该。我为我的测试创建了这个沙盒：codesandbox.io/s/nuxtjs-fetch-does-not-work-dgmd9我也尝试使用商店，但我无法......（nuxtjs.org/blog/understanding-how-fetch-works-in-nuxt-2-12）。由于 fetch 已被弃用，我建议您使用 asyncData 或在 mount() 事件而不是 fetch() 事件上获取数据。

标签： vue.js nuxt.js

【解决方案1】：

您需要等待 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)
}

【讨论】：