重复多次调用Nuxt fetch()

Question

我正在创建一个从Array.Buffer异步接收图像的基本组件。

遵循Nuxt documentation，我认为fetch()将是正确的调用，但当它被实现时，它被调用+20次。

这一切为什么要发生？我想利用async/await，但现在看来created() promises必须要做吗？

<template>
  <div class="image-container">
        <!-- <img :class="imgClasses" :src="`data:image/png;base64, ${image}`" alt="Preview Image" /> -->
  </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 = ''

  get imgClasses() {
    return {
      [`preview-image-${this.size}`]: true
    }
  }

  async fetch() {
    console.log('fetching')
  }

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

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

​

​

Answer 1

渲染路由时在服务器端调用fetch，导航时在客户端调用fetch。因此，有机会多次调用/撤销fetch()。也许你已经在多个地方使用过这个组件。但是重要的事情fetch()在Nuxt >= 2.12中被弃用

但是你可以通过这种方式控制fetchOnServer: false，然后它将只在客户端调用。

<script>
export default {
  data () {
    return {
      posts: []
    }
  },
  async fetch () {
    this.posts = await this.$http.$get('https://jsonplaceholder.typicode.com/posts')
  },
  fetchOnServer: false
}
</script>