- zh.nuxtjs.org/api/
- 你可能想要在服务器端获取并渲染数据。Nuxt.js添加了asyncData方法使得你能够在渲染组件之前异步获取数据。
1.类型
Function
2.官方解释
- asyncData方法会在组件(限于页面组件)每次加载之前被调用。它可以在服务端或路由更新之前被调用。在这个方法被调用的时候,第一个参数被设定为当前页面的上下文对象,你可以利用 asyncData方法来获取数据并返回给当前组件。
- asyncData只在服务端执行
3.demo
<template>
<section class="container">
<h1>{{ message }}</h1>
</section>
</template>
<script>
export default {
data() {
return { message: "data" };
},
//常用context
asyncData({isDev, route, store, env, params, query, req, res, redirect, error}) {
return { message: "asyncData" };
}
};
</script>
<script>
// 常用context
let context = {
route: {
name: 'index',
meta: [{}],
path: '/',
hash: '',
query: { a: '1' },
params: {},
fullPath: '/?a=1',
matched: [[Object]]
},
isDev: true,
store,
env: {},
req: {},
res: {},
params: {},
query: {},
redirect: [Function],
error: [Function]
}
</script>