Fetch钩

Nuxt > = 2.12

Nuxt.jsv2.12引入一个被调用的新钩子获取你可以使用在任何Vue组件中.每次需要get时使用fetch异步数据。获取在呈现路由时在服务器端调用,在导航时在客户端调用。

它使fetchState美元在组件级:

  • fetchState.pending美元布尔时,允许您显示占位符获取被称为在客户端
  • fetchState.error美元错误,允许您显示错误消息
  • fetchState.timestamp美元整数,是最后一次读取的时间戳,用于缓存维生

如果你想打给获取从你的模板使用钩子:

<按钮@click取美元>刷新按钮>

或组件的方法:

//从组件方法在脚本部分出口默认的方法刷新取美元

你可以访问next上下文在取钩子中使用nuxt.context美元这个。

选项

  • fetchOnServer布尔函数(默认值:真正的),电话fetch ()当服务器渲染页面时
  • fetchKey字符串函数(默认为组件范围ID或组件名)、标识该组件获取结果的键(或生成唯一键的函数)(可在next 2.15+上使用)更多信息可在原始公关
  • fetchDelay整数(默认值:200),以毫秒为单位设置最小执行时间(以避免快速闪烁)

fetchOnServerfalsy (或返回),获取将仅在客户端调用fetchState.pending美元将返回真正的当服务器呈现组件时。

<脚本>出口默认的数据返回的帖子异步获取的帖子等待http美元让美元“https://api.nuxtjs.dev/posts”fetchOnServer//多个组件可以返回相同的' fetchKey ',而next将分别跟踪它们fetchKey“site-sidebar”//或者,为了获得更多的控制,一个函数可以通过访问组件实例来传递//它将在' created '中被调用,并且不能依赖于已获取的数据fetchKeygetCounter// getCounter是一个方法,可以被调用来获取序列中的下一个数字//生成一个唯一的fetchKey。返回someOtherData+getCounter“侧边栏”脚本>

获取钩子的更多信息数据抓取专题书的一章

在这一页上

合作伙伴

  • Netlify"class=
  • 谷歌浏览器"class=
  • Vercel"class=
  • 膨胀"class=
  • Strapi"class=
  • 船的形状"class=
  • Layer0"class=
  • Storyblok"class=
  • 64个机器人"class=
  • Netlify"class=
  • 谷歌浏览器"class=
  • Vercel"class=
  • 膨胀"class=
  • Strapi"class=
  • 船的形状"class=
  • Layer0"class=
  • Storyblok"class=
  • 64个机器人"class=
支持我们