V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
yuann72
V2EX  ›  问与答

后台管理的前端页面是不是不适合做成这种带 tab 的功能,如果不是, 怎么解决更新问题?

  •  
  •   yuann72 · 2019-07-23 08:43:55 +08:00 · 1971 次点击
    这是一个创建于 1949 天前的主题,其中的信息可能已经有所发展或是发生改变。

    https://imgchr.com/i/eFnDZd
    就是这种会缓存之前页面的数据的功能,打开 A 功能 > 打开 B 功能 > 再打开 A 功能时,A 功能的数据还是原来的数据不用再请求接口

    在发布文章页面, 发布完文章后, 需要手动刷新文章列表功能或通过埋点去触发刷新机制, 才能使文章列表功能的数据显示的是最新的文章列表.
    这种手动刷新或埋点触发刷新的方式, 在只需要刷新一个功能时还能接受, 但如果遇到发布完文章后, 有 A, B, C, D 好几个功能页面需要刷新来显示最新的数据时要怎么解决

    15 条回复    2019-07-23 15:29:26 +08:00
    sevenzhou1218
        1
    sevenzhou1218  
       2019-07-23 08:50:04 +08:00
    EventEmitter?
    EmotionV
        2
    EmotionV  
       2019-07-23 08:55:00 +08:00
    EventBus?
    ismumu
        3
    ismumu  
       2019-07-23 08:56:16 +08:00
    vue keep-alive
    yuann72
        4
    yuann72  
    OP
       2019-07-23 09:04:06 +08:00
    @sevenzhou1218 #1 这个一样不行吧

    比如用户管理, 有 A, B, C, D 好几个功能, 展示的数据中包含了用户的用户名, 这样我都要提前在这些功能里设定好事件监听器, 然后我在用户管理功能里修改了某个用户的用户名时, 这些功能才能正常刷新数据
    那如果哪天我又在 A 功能里加了另一个展示数据列, 我还要再增加一个监听器, 要是忘记加了, 那另一列的数据更新了, A 功能里的数据还是不会自动更新
    yuann72
        5
    yuann72  
    OP
       2019-07-23 09:04:31 +08:00
    @EmotionV #2 同上
    wangxiaoaer
        6
    wangxiaoaer  
       2019-07-23 09:07:56 +08:00 via Android
    左边导航就够了,右边的 tab 感觉多余,尤其是 tab 个数多起来看起来乱,也容易误操作关闭。
    dongsuo
        7
    dongsuo  
       2019-07-23 09:14:45 +08:00 via Android
    你去掉 keep alive 就行了,这个项目是开源项目,只是功能展示,有人需要,作者就做了,但是你自己公司的业务代码自己随便搞呀
    zqx
        8
    zqx  
       2019-07-23 09:19:38 +08:00 via Android
    每个页面数据对应 store 的一个 state 树节点,业务需要时 dispatch 全局 action 更新数据,更新的时候 tab(以及所有用到这个节点的未卸载的页面)由于 props 改变而自动重新渲染
    yuann72
        9
    yuann72  
    OP
       2019-07-23 09:20:50 +08:00
    @dongsuo #7 我能想到的最终方法也是去掉 keep alive,但还是想发出看看有没有其他更好的我没想到的方法来比较完美的实现缓存数据和解决更新问题。。。
    LongMaoz
        10
    LongMaoz  
       2019-07-23 09:39:47 +08:00
    单例模式 VM 层数据共享到所有需要的页面,双向绑定
    lizz666
        11
    lizz666  
       2019-07-23 09:40:21 +08:00
    上上周刚好接到这个需求,基于 vue 开发的,用到了 keep-alive 的 includes 属性,配合组件 name 使用,用的 ele 的 tag 组件
    otakustay
        12
    otakustay  
       2019-07-23 09:47:13 +08:00
    redux + redux-query + normalization
    mystorp
        13
    mystorp  
       2019-07-23 10:24:17 +08:00
    一楼说的 EventEmitter 可以。
    或者使用 vuex

    不管使用哪种,接口请求的数据都是需要和功能代码解耦的。
    agdhole
        14
    agdhole  
       2019-07-23 15:25:07 +08:00 via Android
    用 rxjs
    TrickWu
        15
    TrickWu  
       2019-07-23 15:29:26 +08:00
    这个好像是潘神的那个 admin 后台管理吧
    你可以去搜下他的手把手文章
    我记得有写传个 key 参数切换回来的时候回去请求新的数据
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   925 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 22:15 · PVG 06:15 · LAX 14:15 · JFK 17:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.