未在 nuxt 中调用 AsyncData

Question

我想在asyncData()钩子上设置分类数据。但是 MainHeader 页面组件永远不会调用 asyncData 即使它被放置在一个页面中。您能解释一下为什么 MainHeader 页面组件不调用 asyncData 吗？

MainHeader 位于页面 (/pages/com/MainHeader)

上的“com”文件夹内

<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 的工作方式（先 server-side 然后 client-side）。

请按照 my-cool-page 而不是 myCoolPage 命名页面的惯例，同时请记住 asyncData 仅适用于 inside of pages.

您的项目运行良好，例如，创建以下文件/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>

未在 nuxt 中调用 AsyncData

AsyncData not being called in nuxt

javascript

nuxt.js

asyncdata