如何在挂载钩子中而不是在单个方法中初始化代码？

Question

我正在学习如何使用名为安诺里奥的Javascript图像注释库。如何在挂载钩子期间初始化库(假设这是实现它的最佳位置)，而不是像我现在使用的方式那样用独立的方法初始化库？

我有两种方法：(working 这里 )

PhotoDetail.vue

annotatePhoto() {
  try {
    const anno = new Annotorious({   <-------- how to get this out of this scope and into the global scope of this SFC?
      image: this.photo.id // image element or ID
    })
    // Attach listeners to handle annotation events
    anno.on('createAnnotation', annotation => {
      console.log('Created!', annotation)
    })
  } catch (error) {
    console.log('anno error', error)
  }
}

和

loadAnnotations() {
const anno = new Annotorious({   <-------- how to get this out of this scope and into the global scope of this SFC?
      image: this.photo.id // image element or ID
    })
          anno.setAnnotations(annotations) < --- this is undefined because of this scope
        })
    }

我试过：

  computed: {
    anno() {
      const anno = Annotorious.init({
        image: this.photo.id
      })
      return anno
    }
  }

谢谢!

Answer 1

我做了些什么让这件事起作用：

  data() {
    return {
      photo: {},
      anno: {}
    }
  },
  async mounted() {
    await this.getPhoto()
    this.anno = new Annotorious({ image: this.photo.id })
    this.annotatePhoto()