时间戳

首页 > 解决方案 > Nuxt fetch() 多次调用

vue.js - Nuxt fetch() 多次调用

问题描述

我正在创建一个基本组件，它以Array.Buffer异步方式从 接收图像。

在Nuxt 文档之后，我认为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')
  }
}

输出

标签： vue.jsnuxt.js

解决方案

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>

推荐阅读