Nuxt.js的异步数据-asyncData

asyncData()方法

• 基本用方法：

  • 它会将asyncData返回的数据融合组件data方法返回数据一并给组件

  • 调用时机：服务端渲染期间和客户端路由更新之前

• 注意事项：

  • asyncData()只能在页面组件上使用

  • 没有this,因为它是在组件初始化之前被调用的

 

代码案例

<template>
  <div>
      <h1>{{ title }}</h1>
      <nuxt-link to='/about'> about</nuxt-link>

      <!-- 非页面组件中的调用 -->
      <foo :posts="posts"></foo>
  </div>
</template>

<script> 
import axios from 'axios'
import Foo from "@/components/foo"

export default {
    name:"index",
    components:{
      Foo
    },
  // 当你想要动态页面内容有利于SEO或者是提升首屏渲染速度的时候，就在asyncData中请求数据
   async asyncData(){
   const  res=await  axios({
        method:"GET",
        url:'http://localhost:3000/data.json'
      })
      // console.log(res)
      return res.data
    },
  // 如果是非异步数据或者普通数据，则正常的初始化到data中调用
    data(){
      return{
       foo:"bar"
      }
    }
}
</script>