NuxtJS:将异步/等待与mounted()和$nextTick()一起使用？

Question

我如何在这里使用异步/等待？我的以下代码不起作用，因为根据我的控制台消息，await在async函数之外。

  async mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()
      this.anno = await window.Annotorious.init({
        image: this.photo.id
      })
      await this.setAuthorInfo()
      this.anno.setVisible(false)
      setTimeout(() => this.$nuxt.$loading.finish(), 500)
    })

Answer 1

在()之前添加async

async mounted() {
  this.$nextTick(async () => {
    this.$nuxt.$loading.start()
    this.anno = await window.Annotorious.init({
      image: this.photo.id
    })
    await this.setAuthorInfo()
    this.anno.setVisible(false)
    setTimeout(() => this.$nuxt.$loading.finish(), 500)
  })
}

Answer 2

以下是async mounted的示例

<template>
    <div v-if="testAsync">{{testAsync}}</div>
</template>

<script>
  export default {
    data(){
      return {
        testAsync: "",
      }
    },

    async mounted() {
      let start = + new Date();
      this.testAsync= await this.testPromise();
      let finish = + new Date();
      console.log("here we wait ", finish - start, " ms for you");
    },

    methods:{
      async testPromise() {
        return new Promise(resolve => {
          this.$nextTick(() => {
            this.$nuxt.$loading.start()
            setTimeout(() => { this.$nuxt.$loading.finish(); resolve('Hello');}, 5000);
          })
        });
      }
    }
</script>

在解析promise之前放置v-if以确保vue不会呈现模板