asyncData和访存未设置数据

如何解决asyncData和访存未设置数据

我正在将nuxt v2.14.1与Typescript和 nuxt-property-decorator 软件包一起使用。 我面临很多问题。

1. 我无法从fetch（）或asyncData设置数据。

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

Vue开发人员工具也将结果显示为空数组。

有人可以帮助我了解正在发生的事情以及如何解决吗？

以下是使用提取的代码：

@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上下文似乎可行。 不知道为什么。

解决方法

您是否尝试过仅返回一个对象？

  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内部，因为它是在启动组件之前被调用的。