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

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

  •  
  •   wuhaoworld · 195 天前 · 2930 次点击
    这是一个创建于 195 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

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

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

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

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