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
),以毫秒为单位设置最小执行时间(以避免快速闪烁)
当fetchOnServer
falsy (假
或返回假
),获取
将仅在客户端调用fetchState.pending美元
将返回真正的
当服务器呈现组件时。
<脚本>出口默认的{数据(){返回{的帖子:[]}},异步获取(){这.的帖子=等待这.http美元.让美元(“https://api.nuxtjs.dev/posts”)},fetchOnServer:假,//多个组件可以返回相同的' fetchKey ',而next将分别跟踪它们fetchKey:“site-sidebar”,//或者,为了获得更多的控制,一个函数可以通过访问组件实例来传递//它将在' created '中被调用,并且不能依赖于已获取的数据fetchKey(getCounter){// getCounter是一个方法,可以被调用来获取序列中的下一个数字//生成一个唯一的fetchKey。返回这.someOtherData+getCounter(“侧边栏”)}}脚本>
获取钩子的更多信息数据抓取专题书的一章
贡献者













发现了一个错误还是想对文档做出贡献?在GitHub上编辑此页!