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

Posted 2023-02-23

【中文标题】nuxt 类组件。异步获取不起作用

【英文标题】：nuxt class component. async fetch dont work

【发布时间】：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>

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

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

【参考方案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",