Nuxt.js调用asyncData

<template>
  <div>
    Index {{ username }}
  </div>
</template>

<script>
export default {
  name: "Index",
  async asyncData () {
    const asyncData = {};
    await new Promise((resolve, reject) => {
      setTimeout(() => {
        asyncData.username = 'John Smith';
        resolve();
      }, 2000)
    });
    return asyncData;
  }
};
</script>

使用

直接在页面上使用下面的代码就行了

{{ username }}

多个请求

async asyncData () {
// 正确
let [pageRes, countRes] = await Promise.all([
  axios.get('/api/users'),
  axios.get('/api/users')
])

  return {
      users: pageRes,
      msg: countRes
    }
 },
created () {
    console.log(this.users)
    console.log(this.msg)
  }
}

Nuxt.js调用asyncData

原文：https://www.cnblogs.com/tangyouwei/p/10558833.html