asyncData 和 fetch 没有设置数据

Question

我正在使用带有 typescript 和 nuxt-property-decorator 包的 nuxt v2.14.1。 我面临很多问题。

1. 我无法从 fetch() 或 asyncData 设置数据。

   console.log(this.fruits) // => undefined
   console.log(response.data);//  => [{},..}
   this.fruits = response.data; // => this does not set fruits
   

Vue 开发工具也将水果显示为空数组。

谁能帮我了解发生了什么以及如何解决它？

这里是使用 fetch 的代码：

@Component({
  layout: 'AppLayout',
  async fetch({ query, store }: Context) {
    const self = this;
    const model = new Car();
    model.setFilters(query);
    const response = await model.$api.$get('/new/cars').catch(() => {
      store.$showError('Unable to fetch cars');
    });
    if (response) {
      // @ts-ignore
      self.cars = Car.collect(response.data as Partial<Car>[]);
    }
  },
})
export default class index extends Vue {
  cars: Car[] = [];
}

如果我只是将 fetch 重命名为 mounted，上面的代码就可以工作。

另外，当使用 asyncData 时，代码似乎可以工作，并且我看到了我的汽车列表，然后，当页面加载完成时，即使我可以看到 Vue 开发工具中列出的汽车，页面也会自动变为空。

更新：在 fetch 参数中不使用 nuxt 上下文似乎有效。 不知道为什么。

Answer 1

你试过只返回一个对象吗？

  async fetch({ query, store }: Context) {
    const model = new Car();
    model.setFilters(query);
    const response = await model.$api.$get('/new/cars').catch(() => {
      store.$showError('Unable to fetch cars');
    });
    if (response) {
      return {
         cars: Car.collect(response.data as Partial<Car>[])
      }
    }
  },

只需返回它，它应该将您的返回对象与您的数据对象合并。

他们也在文档中写道：https://nuxtjs.org/api/

asyncData 的结果将与数据合并。

请注意：由于asyncData() 发生在服务器端，它无法使用this 访问vue 实例

警告：您无权通过this 访问组件实例 在 asyncData 内部，因为它在启动组件之前被调用。