vue.js - Nuxt async fetch() 创建多个实例？重复的 fetch() 调用

Question

我有一个简单的BasePreviewImage组件需要从内部 API 异步获取 Array.Buffer()。但是，尽管组件本身已被销毁，但似乎async fetch()每个创建的实例都会调用它。

例子：

<template>
  <div class="image-container">
  </div>
</template>


<script lang="ts">
import { Vue, Component, Prop } from 'nuxt-property-decorator'

@Component({})
export default class BasePreviewImage extends Vue {
  @Prop({ type: String }) id: string
  @Prop({ type: String, default: 'small' }) size: string

  image: string = ''

  async fetch() {
    console.log('async fetch', this)
  }

  created() {
    console.log('created')
  }

  mounted() {
    console.log('mounted')
  }

  beforeDestroy() {
    console.log('beforeDestroy')
  }
}
</script>

当我加载带有 1 个BasePreviewImage组件的页面然后返回，然后重新打开页面时输出。这将继续调用 fetch n 次页面已打开。

当用户浏览页面时，如何避免多次调用 API 以及此处是否存在其他一些内存泄漏？

我不确定问题是代码、配置、、、、、还是vue其他地方。nuxtnuxt-property-decoratorvue-class-component

相关但无帮助：https ://github.com/vuejs/vue-class-component/issues/418