Quiero establecer datos de categoría en el gancho asyncData() . Pero el componente de página MainHeader nunca llama a asyncData incluso si se coloca en una página. ¿Puede explicar por qué el componente de la página MainHeader no llama a asyncData ?
MainHeader se coloca dentro de la carpeta "com" que se coloca en las páginas ( /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> predeterminado ( /layouts/default )
<template> <div> <main-header/> <Nuxt/> </div> </template> <script> import MainHeader from "~/pages/com/MainHeader.vue" export default { components :{ MainHeader, }, name: "defaultLayout" } </script>Probablemente esté llegando a su página directamente, algo así como /com/test-page supongo, allí obtendrá el primer resultado inicial en el servidor (puede verificar, obtendrá un console.log allí), que es legítimo porque así es como funciona Nuxt (primero del lado del servidor y luego del lado del cliente).
Siga la convención de nombrar sus páginas como my-cool-page y no myCoolPage y también tenga en cuenta que asyncData solo funciona dentro de las páginas .
Su proyecto funciona perfectamente bien, como ejemplo, cree el siguiente archivo /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>