Nuxt记录-asyncData

2,013 阅读1分钟
  • 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>