V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
linuxsteam
V2EX  ›  Vue.js

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

  •  
  •   linuxsteam · 2020-06-16 07:19:32 +08:00 · 3898 次点击
    这是一个创建于 1628 天前的主题,其中的信息可能已经有所发展或是发生改变。

    可行方法

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

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

    ------代码结构 代码结构

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

    问题

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

    第 1 条附言  ·  2020-06-17 12:49:11 +08:00
    经过一天的突击学习:
    解决方案如下:
    使用 nuxtServerInit 初始化数据

    为什么不用 fetch?
    1. fetch 写在 layout 中不生效
    2. 写在 page 里,就必须每个 page 都得写这个方法(不访问指定页面的话,是不会更新 store 的)
    11 条回复    2020-06-16 17:21:57 +08:00
    noe132
        1
    noe132  
       2020-06-16 07:46:35 +08:00 via Android
    https://nuxtjs.org/api/pages-fetch 了解一下
    或者用 store
    linuxsteam
        2
    linuxsteam  
    OP
       2020-06-16 08:35:50 +08:00
    @noe132 谢谢,了解了。也许只能用这个了
    fengxianqi
        3
    fengxianqi  
       2020-06-16 08:38:45 +08:00 via Android
    把生命周期都写在子组件里不见得是好事,后期维护也困难,子组件只管输入输出也是很好。可以将拉取数据的代码用 mixin,在需要的页面引入。
    linuxsteam
        4
    linuxsteam  
    OP
       2020-06-16 09:13:59 +08:00
    @fengxianqi Header 这种东西,的确每个页面都要加载。。。动态菜单,刚刚又看了下 B 站和掘金,他们好像是把 Header 大部分都写死了(或者服务器渲染了)
    fengxianqi
        5
    fengxianqi  
       2020-06-16 09:35:16 +08:00
    @linuxsteam #4 我感觉是你用得不对,header 既然是全局的,那只会在一个地方用到,然后所有子页面都用 router-view,而不是每个页面都得引这个 header
    zhuweiyou
        6
    zhuweiyou  
       2020-06-16 09:47:38 +08:00
    NuxtChild 应该是你想要的东西。
    linuxsteam
        7
    linuxsteam  
    OP
       2020-06-16 11:26:48 +08:00
    @fengxianqi 是的,nuxt 叫 layout,但是 layout 里面也无法使用 asyncData
    linuxsteam
        8
    linuxsteam  
    OP
       2020-06-16 11:31:37 +08:00
    @zhuweiyou 这个我也考虑了。
    1. 页面套页面 会产生多余路由。 还需要路由守卫去抛出这些访问请求
    2. nuxt 我都不知道能不能 Imort page 里的东西 @_@
    sliveryukilee
        9
    sliveryukilee  
       2020-06-16 13:48:41 +08:00
    1. 子组件不能用 asyncData 不代表不是服务端渲染
    sliveryukilee
        10
    sliveryukilee  
       2020-06-16 13:55:42 +08:00
    2. 全局的归全局, Header 既然是公用的,那么放在 layout 里,使用 nuxt serverInit + store 初始化数据不行吗?
    linuxsteam
        11
    linuxsteam  
    OP
       2020-06-16 17:21:57 +08:00
    @sliveryukilee 目前只能这样了, 我说的有问题,都是服务端渲染。
    不过对于蜘蛛的 体验上不一样,asyncData 是服务端发起 http 请求后存放完数据返回给前台。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1481 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 17:27 · PVG 01:27 · LAX 09:27 · JFK 12:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.