Vue.js 多次重复调用Nuxt fetch（）

我正在创建一个基本组件，它异步地从

数组.Buffer

接收图像中的数据

接下来，我认为

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')
  }
}

从'nuxt property decorator'导入{Vue，Component，Prop}
@组成部分
导出默认类BasePreviewImage扩展Vue{
@属性（{type:String}）id:String
@属性（{type:String，默认值：'small'}）大小：String
图像：字符串=“”
获取imgClasses（）{
返回{
[`preview image-${this.size}`]：true
}
}
异步获取（）{
console.log（'fetching'）
}
安装的（）{
console.log（'mounted'）
}
创建（）{
console.log（'Created BasePreviewImage'）
}
}

---

呈现路由时在服务器端调用fetch，导航时在客户端调用fetch。因此有机会多次调用/撤销

fetch（）

。可能您也在多个地方使用过该组件。但是重要的东西

fetch（）

在numxt>=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>

导出默认值{
数据（）{
返回{
员额：[]
}
},
异步获取（）{
this.posts=等待此消息。$http。$get（'https://jsonplaceholder.typicode.com/posts')
},
fetchOnServer:false
}

呈现路由时在服务器端调用fetch，导航时在客户端调用fetch。因此有机会多次调用/撤销

fetch（）

。可能您也在多个地方使用过该组件。但是重要的东西

fetch（）

在numxt>=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>

导出默认值{
数据（）{
返回{
员额：[]
}
},
异步获取（）{
this.posts=等待此消息。$http。$get（'https://jsonplaceholder.typicode.com/posts')
},
fetchOnServer:false
}

欣赏您的输入。当我回到电脑前，我会尝试设置，但我不确定情况是否如此。该元素只在页面上出现一次，因此被调用23次是很奇怪的。不管怎样，看起来我还是要找到一种不同的方法。经过测试，问题似乎与

fetchOnServer

设置无关。更新问题并重新发布，感谢您的输入。当我回到电脑前，我会尝试设置，但我不确定情况是否如此。该元素只在页面上出现一次，因此被调用23次是很奇怪的。不管怎样，看起来我还是要找到一种不同的方法。经过测试，问题似乎与

fetchOnServer

设置无关。更新问题并重新发布