nuxt 类组件。异步获取不起作用

【问题标题】：nuxt class component. async fetch dont worknuxt 类组件。异步获取不起作用
【发布时间】：2021-08-17 23:33:53
【问题描述】：

<script lang="ts">

  import { Vue, Component } from 'vue-property-decorator'
  @Component
  export default class Index extends Vue {
    form = {
      name: '',
      adress: '',
      age: '',
      items: [],
    }


    async fetch() {
      this.form.items = await fetch('https://api.nuxtjs.dev/posts').then(c => c.json())

      console.log(this.form.items)
    }

    fetchOnServer = true;
    changeLanguage(language: string) {
      this.$i18n.setLocale(language);
    }
  }
</script>

异步获取在类组件中不起作用

如果我使用标准组件，它可以正常工作。但是如果我使用类组件，函数调用就会停止工作。问题是什么，如何解决

【问题讨论】：

标签： vue-component nuxt.js

【解决方案1】：

作为注释参数，它可以工作

@Component({
  components: {ValidationProvider, ValidationObserver},
  async fetch() {
    console.log('** fetch at ');
    console.log(this.$route);
    await new Promise((resolve) => {
    setTimeout(resolve, 1000);
  });
}

})
export default class xrayClient extends Vue {

由于类方法 created() 有效：

async created() {
console.log('** created ');
console.log(this.$route);
await new Promise((resolve) => {
  setTimeout(resolve, 1000);
});

Mounted() 有效：

async mounted() {
  console.log('** mounted '  + this.data);
   await new Promise((resolve) => {
    setTimeout(resolve, 1000);
  });
}

打电话

async asyncData()

和

fetch() {

别跑。

"nuxt": "^2.15.7",

【讨论】：