Javascript nuxt 中未调用 AsyncData

发布于05月09日

我想把分类数据设为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>

违约

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

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

推荐答案

你可能会直接到达你的页面，比如/com/test-page，我猜，在那里你会在服务器上得到第一个初始结果(你可以判断，你会在那里得到console.log)，这是合法的，因为这就是Nuxt的工作方式(先是服务器端，然后是客户端).

请遵循将页面命名为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>