用 Vue 写列表页/详情页 的一个常见的需求，大神们都是如何解决的？
wuhaoworld · 2021-05-23 14:17:50 +08:00 · 4693 次点击这是一个创建于 1286 天前的主题，其中的信息可能已经有所发展或是发生改变。
比如一个管理后台，列表页展示所有文章，包括标题、作者、发布时间等。 点击文章标题进入详情页，可以对文章进行编辑，可以编辑后返回列表页，也可以直接返回列表页。
因为文章列表很长，从文章详情页返回列表页需要保持其滚动条位置，还有其他组件的状态，所以对列表页设置了 keep-alive 。
如果不做其他控制对话，修改 /删除文章后，返回列表页，刚刚编辑的文章还是以原来的名称显示，并没有更新。
网上看到一种方案，是说一旦编辑或修改，再返回列表页时，在 beforeRouteLeave 回调中，让列表页的 keep-alive 设为 fasle，但这样整个列表页都被刷新了，之前的状态并没被保留，我期望即使文章被编辑后，返回列表还能保留之前的滚动条位置以及其他组件的状态，同时列表页显示最新的文章标题及内容。
暂没有用 Vuex，大家是如何解决这个问题的？
 |
1
xingyue 2021-05-23 14:29:34 +08:00 via Android
tabs，列表一个 tab，详情 /编辑一个 tab
|
 |
2
renmu123 2021-05-23 14:37:01 +08:00 via Android  1
编辑后在列表的 list 中找到被编辑文章的 id，然后修改该文章的 name
|
 |
3
Midnight 2021-05-23 15:28:51 +08:00
调后端修改接口时后端返回修改后的内容，直接更新状态就好了
|
 |
4
aaronlam 2021-05-23 15:59:00 +08:00
返回后调用接口更新指定那条被更新的记录不就好啦？
|
 |
5
ZhangZisu 2021-05-23 16:43:27 +08:00
详情页用 Vue router 子路由，列表 router view 为父组件，传入正在编辑的对象；编辑组件 props 双向绑定。
|
 |
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 ) ``` |
 |
7
wuhaoworld OP |
 |
8
alphat 2021-05-23 17:31:09 +08:00
|
|
9
renmu123 2021-05-23 18:19:32 +08:00 via Android
@wuhaoworld 我是觉得这个需求不常见，大部分都是 50 条数据分页，更新后直接刷新了
|
 |
10
xiaoliaoliao 2021-05-23 23:31:27 +08:00 via iPhone
可以试试我写的 vu-query，更改商品名称后通过更新请求列表的缓存实现。
|
|
11
xiaoliaoliao 2021-05-23 23:34:07 +08:00 via iPhone
@xiaoliaoliao 而且也不需要使用 keep alive 去缓存页面了，vu-query 提供了开箱即用的请求数据缓存及滚动恢复
|
 |
12
nianyu 2021-05-24 09:33:32 +08:00
详情页编辑删除返回到列表页重现刷新，那这时候有新增的文章，岂不是看不到了
|
 |
13
xu2060 2021-05-24 11:36:41 +08:00
可以在详情页判断用户是否编辑，如果编辑了离开的时候在 beforeRouteLeave 的回调里面把更新完的标题传回列表页。（传回列表页如果没有父子关系，可以用 EventBus 传，如果是父子组件就用 this.$emit()鉴于现在没有 Vuex ）这时候列表页的 data 里面保存了离开列表页时的滚动条位置。这样状态保持了，标题也更新了。
|
 |
14
KouShuiYu 2021-05-24 12:24:39 +08:00
array.splice(编辑的 index,1,编辑后的);
|
 |
15
letwewell 2021-05-24 13:47:47 +08:00
返回保证之前的滚动条位置 数据还要更新 。 假设返回后数据新增了几十条 滚动条位置应该变吗？
|
 |
16
aools 2021-05-24 15:11:19 +08:00
deactivated 时记录滚动位置，activated 时重新请求数据并调整滚动条位置
|
 |
17
sjhhjx0122 2021-05-24 16:57:16 +08:00
用 extends 封装个服务式的 drawer，用 promise 包裹，close 方法 resolve，然后把 close 方法传递给子组件，子组件逻辑结束触发 close 方法，父页面就能拿到回调了
drawer(child,params).then() |
 |
18
darknoll 2021-05-24 22:39:22 +08:00
返回的时候计算滚动条位置
|
 |
19
CokeMine 2021-05-25 01:51:43 +08:00 via Android
OnActivated 钩子重新请求数据
|
 |
20
gzf6 2021-05-25 09:22:00 +08:00 via Android
project 提供一个更新的方法，编辑后请求一次
|
 |
21
dfkjgklfdjg 2021-05-25 15:42:09 +08:00
详情页修改之后使用 eventBus 通知列表修改对应 id 的记录之中 title, notice 之类需要展示数据。
或者返回功能使用 $router.replace 替换 $router.push，通过 params 对象传递 id 以及 title 之类的属性，在列表页激活的时候去修改对应记录。 |
 |
22
liuchengfeng1 2021-11-05 11:10:12 +08:00
|
Select Language