Nuxt記錄-asyncData

失落憶發表於2019-05-20
UX
  • zh.nuxtjs.org/api/
  • 你可能想要在伺服器端獲取並渲染資料。Nuxt.js新增了asyncData方法使得你能夠在渲染元件之前非同步獲取資料。

1.型別

Function

2.官方解釋

  • asyncData方法會在元件（限於頁面元件）每次載入之前被呼叫。它可以在服務端或路由更新之前被呼叫。在這個方法被呼叫的時候，第一個引數被設定為當前頁面的上下文物件，你可以利用 asyncData方法來獲取資料並返回給當前元件。
  • asyncData只在服務端執行

3.demo

Nuxt記錄-asyncData

<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>
複製程式碼

相關文章