如何防止在 Nuxt.js 中重复调用 asyncData答案

【问题标题】：How do i prevent duplicate calling of asyncData in Nuxt.js如何防止在 Nuxt.js 中重复调用 asyncData
【发布时间】：2021-09-13 05:01:26
【问题描述】：

nuxt.js v2.15.3.

我在某些页面中使用了asyncData，这些页面由nuxt-link访问。
但是如果连续点击nuxt-link（点击间隔小于1000ms），asyncData函数是连续调用的。
有没有防止这种情况？我是否使用fetch 而不是asyncData？

<!-- some component -->
<nuxt-link :to="`/some-page`"></nuxt-link>

// some page component 
async asyncData({ $axios ) {
  // Called as much as clicking.
  const resp = $axios.get(....)

  return { data :resp.data }
}

【问题讨论】：

也许在点击时禁用 NuxtLink？就像解释here

标签： javascript vue.js nuxt.js

【解决方案1】：

您可以在点击后立即禁用链接：

// some component
<nuxt-link to="/some-page" @click="onLinkClick"></nuxt-link>

data() {
  return {
    linkClicked: false,
  }
}

onLinkClick(e) {
  e.preventDefault();
  
  if (linkClicked) return;

  this.linkClicked = true;
}

当然，这个解决方案是假设你只想点击链接一次

【讨论】：

【解决方案2】：

fetch() 可能确实有帮助，因为它会移出页面并消除它的阻塞效果。
您还可以实现去抖动方法或查看禁用<nuxt-link> 是否满足特定条件。在此处查看我的答案以防抖动：https://stackoverflow.com/a/67209352/8816585

另外，随意添加一些 CSS 到按钮（如果你想坚持使用 asyncData），类似于 @null 的解决方案

<nuxt-link to="/some-page" 
  @click="onLinkClick" 
  :disabled="linkClicked"
>
  My fancy link
</nuxt-link>

【讨论】：