Nuxt fetch() 多次调用

Question

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

在Nuxt documentation 之后，我认为fetch() 是正确的调用，但当它实施时，它会被调用+20 次。

为什么会这样？我想利用async/await，但看起来现在 created() 承诺必须这样做？

<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() 在 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>