在nuxt中没有调用AsyncData

Question

我想在asyncData()钩子上设置类别数据。但是，MainHeader页面组件即使放在页面中也不会调用asyncData。您能解释为什么MainHeader页面组件不调用asyncData吗

MainHeader放在"com“文件夹中，该文件夹放在页面上(/pages/com/MainHeader)

<template>
  <div>
    <header-nav :cateList="cateList"/>
  </div>
</template>

<script>
import HeaderNav from '~/components/com/nav/HeaderNav.vue';
import CateApi from "~/util/api/category/cate-api";

export default {
  components: {HeaderNav},

  async asyncData(){
    const cateList = await CateApi.getDispCateList();
    return{
      cateList,
    }
  },

  data() {
    return {
      cateList: [],
    }
  },
}
</script>

默认(/layouts/default)

<template>
<div>
  <main-header/>
  <Nuxt/>
</div>
</template>

<script>
import MainHeader from "~/pages/com/MainHeader.vue"
export default {
  components :{
    MainHeader,
  },
  name: "defaultLayout"
}
</script>

Answer 1

您可能直接到达您的页面，比如/com/test-page，在那里您将在服务器上获得第一个初始结果(您可以检查，您将在那里得到一个console.log )，这是合法的，因为这就是Nuxt的工作方式(服务器端首先是客户端)。

请遵循将页面命名为my-cool-page而不是myCoolPage的惯例，同时也要记住，asyncData只工作于页内。

您的项目运行良好，例如，创建以下文件/pages/com/main-header.vue

<template>
  <div>
    <p> main header page</p>
    <header-nav :cate-list="cateList" />
  </div>
</template>

<script>
import HeaderNav from '~/components/com/nav/HeaderNav.vue';

export default {
  components: { HeaderNav },

  async asyncData() {
    console.log("check your server if accessing this page directly, otherwise you'll see this one in your browser if client-side navigation")
    const response = await fetch('https://jsonplaceholder.typicode.com/todos')
    const cateList = await response.json()

    return { cateList }
  },
}
</script>