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

用 Vue 写列表页/详情页 的一个常见的需求,大神们都是如何解决的?

  •  
  •   wuhaoworld · 2021-05-23 14:17:50 +08:00 · 4338 次点击
    这是一个创建于 1040 天前的主题,其中的信息可能已经有所发展或是发生改变。

    比如一个管理后台,列表页展示所有文章,包括标题、作者、发布时间等。 点击文章标题进入详情页,可以对文章进行编辑,可以编辑后返回列表页,也可以直接返回列表页。

    因为文章列表很长,从文章详情页返回列表页需要保持其滚动条位置,还有其他组件的状态,所以对列表页设置了 keep-alive 。

    如果不做其他控制对话,修改 /删除文章后,返回列表页,刚刚编辑的文章还是以原来的名称显示,并没有更新。

    网上看到一种方案,是说一旦编辑或修改,再返回列表页时,在 beforeRouteLeave 回调中,让列表页的 keep-alive 设为 fasle,但这样整个列表页都被刷新了,之前的状态并没被保留,我期望即使文章被编辑后,返回列表还能保留之前的滚动条位置以及其他组件的状态,同时列表页显示最新的文章标题及内容。

    暂没有用 Vuex,大家是如何解决这个问题的?

    22 条回复    2021-11-05 11:10:12 +08:00
    xingyue
        1
    xingyue  
       2021-05-23 14:29:34 +08:00 via Android
    tabs,列表一个 tab,详情 /编辑一个 tab
    renmu123
        2
    renmu123  
       2021-05-23 14:37:01 +08:00 via Android   ❤️ 1
    编辑后在列表的 list 中找到被编辑文章的 id,然后修改该文章的 name
    Midnight
        3
    Midnight  
       2021-05-23 15:28:51 +08:00
    调后端修改接口时后端返回修改后的内容,直接更新状态就好了
    aaronlam
        4
    aaronlam  
       2021-05-23 15:59:00 +08:00
    返回后调用接口更新指定那条被更新的记录不就好啦?
    ZhangZisu
        5
    ZhangZisu  
       2021-05-23 16:43:27 +08:00
    详情页用 Vue router 子路由,列表 router view 为父组件,传入正在编辑的对象;编辑组件 props 双向绑定。
    lblblong
        6
    lblblong  
       2021-05-23 16:49:46 +08:00
    建议编辑和详情用 Dialog,在 Dialog 关闭时触发列表项的局部更新,可以用 Promise 连接 Dialog,这样代码非常清晰:

    ```typescript
    const res = await Dialog.open({
    el: UserDetailDialog,
    props: { id: row.id }
    })

    Object.assign( row, res )
    ```
    wuhaoworld
        7
    wuhaoworld  
    OP
       2021-05-23 17:12:26 +08:00
    @renmu123 @aaronlam @aaronlam 目前是这么做的,编辑后在 localStorage 记录操作对象 ID 和动作(删除或修改),返回列表时更新被编辑对象的详情,因为实体类型很多,比如有文章、用户、分类等等,总感觉这个方法不是很好
    renmu123
        9
    renmu123  
       2021-05-23 18:19:32 +08:00 via Android
    @wuhaoworld 我是觉得这个需求不常见,大部分都是 50 条数据分页,更新后直接刷新了
    xiaoliaoliao
        10
    xiaoliaoliao  
       2021-05-23 23:31:27 +08:00 via iPhone
    可以试试我写的 vu-query,更改商品名称后通过更新请求列表的缓存实现。
    xiaoliaoliao
        11
    xiaoliaoliao  
       2021-05-23 23:34:07 +08:00 via iPhone
    @xiaoliaoliao 而且也不需要使用 keep alive 去缓存页面了,vu-query 提供了开箱即用的请求数据缓存及滚动恢复
    nianyu
        12
    nianyu  
       2021-05-24 09:33:32 +08:00
    详情页编辑删除返回到列表页重现刷新,那这时候有新增的文章,岂不是看不到了
    xu2060
        13
    xu2060  
       2021-05-24 11:36:41 +08:00
    可以在详情页判断用户是否编辑,如果编辑了离开的时候在 beforeRouteLeave 的回调里面把更新完的标题传回列表页。(传回列表页如果没有父子关系,可以用 EventBus 传,如果是父子组件就用 this.$emit()鉴于现在没有 Vuex )这时候列表页的 data 里面保存了离开列表页时的滚动条位置。这样状态保持了,标题也更新了。
    KouShuiYu
        14
    KouShuiYu  
       2021-05-24 12:24:39 +08:00
    array.splice(编辑的 index,1,编辑后的);
    letwewell
        15
    letwewell  
       2021-05-24 13:47:47 +08:00
    返回保证之前的滚动条位置 数据还要更新 。 假设返回后数据新增了几十条 滚动条位置应该变吗?
    aools
        16
    aools  
       2021-05-24 15:11:19 +08:00
    deactivated 时记录滚动位置,activated 时重新请求数据并调整滚动条位置
    sjhhjx0122
        17
    sjhhjx0122  
       2021-05-24 16:57:16 +08:00
    用 extends 封装个服务式的 drawer,用 promise 包裹,close 方法 resolve,然后把 close 方法传递给子组件,子组件逻辑结束触发 close 方法,父页面就能拿到回调了

    drawer(child,params).then()
    darknoll
        18
    darknoll  
       2021-05-24 22:39:22 +08:00
    返回的时候计算滚动条位置
    CokeMine
        19
    CokeMine  
       2021-05-25 01:51:43 +08:00 via Android
    OnActivated 钩子重新请求数据
    gzf6
        20
    gzf6  
       2021-05-25 09:22:00 +08:00 via Android
    project 提供一个更新的方法,编辑后请求一次
    dfkjgklfdjg
        21
    dfkjgklfdjg  
       2021-05-25 15:42:09 +08:00
    详情页修改之后使用 eventBus 通知列表修改对应 id 的记录之中 title, notice 之类需要展示数据。
    或者返回功能使用 $router.replace 替换 $router.push,通过 params 对象传递 id 以及 title 之类的属性,在列表页激活的时候去修改对应记录。
    liuchengfeng1
        22
    liuchengfeng1  
       2021-11-05 11:10:12 +08:00
    我也遇到过你这样的问题,做了一个记录;
    http://blog.musclewiki.cn/post/187?cid=51&search=%E7%BC%93%E5%AD%98&index=search
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   930 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 20:55 · PVG 04:55 · LAX 13:55 · JFK 16:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.