Nuxt 如何让子组件也支持 asyncData？

[linuxsteam]

可行方法

目前使用做法是 nuxt (pages)页面组件使用 asyncData 方法，通过 props 传参给(components) 是让子组件进行服务端渲染 这样做的话，调一次子组件就得在父组件复制一份 asyncData 放在父组件，重复代码感觉比较多，是我使用姿势不正确吗？

1. Layout 已经测试，也不支持 asyncData
2. components 使用 asyncData 也测试了，官方文档是正确的 的确这里用不了

------代码结构

------官网对 Layout 介绍

问题

目前就想让 PageHeader 服务端渲染，为了 SEO(服务端渲染)还要遵循 Vue 的风格组件化。还想杜绝重复代码，目前小弟没什么招数了。请求各位前端大佬

经过一天的突击学习：
解决方案如下：
使用 nuxtServerInit 初始化数据

为什么不用 fetch?
1. fetch 写在 layout 中不生效
2. 写在 page 里，就必须每个 page 都得写这个方法(不访问指定页面的话，是不会更新 store 的)

[noe132]

https://nuxtjs.org/api/pages-fetch 了解一下
或者用 store

[linuxsteam]

@noe132 谢谢，了解了。也许只能用这个了

[fengxianqi]

把生命周期都写在子组件里不见得是好事，后期维护也困难，子组件只管输入输出也是很好。可以将拉取数据的代码用 mixin，在需要的页面引入。

[linuxsteam]

@fengxianqi Header 这种东西，的确每个页面都要加载。。。动态菜单，刚刚又看了下 B 站和掘金，他们好像是把 Header 大部分都写死了(或者服务器渲染了)

[fengxianqi]

@linuxsteam #4 我感觉是你用得不对，header 既然是全局的，那只会在一个地方用到，然后所有子页面都用 router-view，而不是每个页面都得引这个 header

[zhuweiyou]

NuxtChild 应该是你想要的东西。

[linuxsteam]

@fengxianqi 是的，nuxt 叫 layout，但是 layout 里面也无法使用 asyncData

[linuxsteam]

@zhuweiyou 这个我也考虑了。
1. 页面套页面 会产生多余路由。 还需要路由守卫去抛出这些访问请求
2. nuxt 我都不知道能不能 Imort page 里的东西 @_@

[sliveryukilee]

1. 子组件不能用 asyncData 不代表不是服务端渲染

[sliveryukilee]

2. 全局的归全局, Header 既然是公用的，那么放在 layout 里，使用 nuxt serverInit + store 初始化数据不行吗？

[linuxsteam]

@sliveryukilee 目前只能这样了， 我说的有问题，都是服务端渲染。
不过对于蜘蛛的 体验上不一样，asyncData 是服务端发起 http 请求后存放完数据返回给前台。