后台管理的前端页面是不是不适合做成这种带 tab 的功能，如果不是, 怎么解决更新问题?
yuann72 · 2019-07-23 08:43:55 +08:00 · 1987 次点击这是一个创建于 1980 天前的主题，其中的信息可能已经有所发展或是发生改变。
https://imgchr.com/i/eFnDZd
就是这种会缓存之前页面的数据的功能，打开 A 功能 > 打开 B 功能 > 再打开 A 功能时,A 功能的数据还是原来的数据不用再请求接口
在发布文章页面, 发布完文章后, 需要手动刷新文章列表功能或通过埋点去触发刷新机制, 才能使文章列表功能的数据显示的是最新的文章列表.
这种手动刷新或埋点触发刷新的方式, 在只需要刷新一个功能时还能接受, 但如果遇到发布完文章后, 有 A, B, C, D 好几个功能页面需要刷新来显示最新的数据时要怎么解决
 |
1
sevenzhou1218 2019-07-23 08:50:04 +08:00
EventEmitter?
|
 |
2
EmotionV 2019-07-23 08:55:00 +08:00
EventBus?
|
 |
3
ismumu 2019-07-23 08:56:16 +08:00
vue keep-alive
|
 |
4
yuann72 OP @sevenzhou1218 #1 这个一样不行吧
比如用户管理, 有 A, B, C, D 好几个功能, 展示的数据中包含了用户的用户名, 这样我都要提前在这些功能里设定好事件监听器, 然后我在用户管理功能里修改了某个用户的用户名时, 这些功能才能正常刷新数据 那如果哪天我又在 A 功能里加了另一个展示数据列, 我还要再增加一个监听器, 要是忘记加了, 那另一列的数据更新了, A 功能里的数据还是不会自动更新 |
 |
6
wangxiaoaer 2019-07-23 09:07:56 +08:00 via Android
左边导航就够了，右边的 tab 感觉多余，尤其是 tab 个数多起来看起来乱，也容易误操作关闭。
|
 |
7
dongsuo 2019-07-23 09:14:45 +08:00 via Android
你去掉 keep alive 就行了，这个项目是开源项目，只是功能展示，有人需要，作者就做了，但是你自己公司的业务代码自己随便搞呀
|
 |
8
zqx 2019-07-23 09:19:38 +08:00 via Android
每个页面数据对应 store 的一个 state 树节点，业务需要时 dispatch 全局 action 更新数据，更新的时候 tab(以及所有用到这个节点的未卸载的页面)由于 props 改变而自动重新渲染
|
|
9
yuann72 OP @dongsuo #7 我能想到的最终方法也是去掉 keep alive，但还是想发出看看有没有其他更好的我没想到的方法来比较完美的实现缓存数据和解决更新问题。。。
|
 |
10
LongMaoz 2019-07-23 09:39:47 +08:00
单例模式 VM 层数据共享到所有需要的页面，双向绑定
|
 |
11
lizz666 2019-07-23 09:40:21 +08:00
上上周刚好接到这个需求，基于 vue 开发的，用到了 keep-alive 的 includes 属性，配合组件 name 使用，用的 ele 的 tag 组件
|
 |
12
otakustay 2019-07-23 09:47:13 +08:00
redux + redux-query + normalization
|
 |
13
mystorp 2019-07-23 10:24:17 +08:00
一楼说的 EventEmitter 可以。
或者使用 vuex 不管使用哪种，接口请求的数据都是需要和功能代码解耦的。 |
 |
14
agdhole 2019-07-23 15:25:07 +08:00 via Android
用 rxjs
|
 |
15
TrickWu 2019-07-23 15:29:26 +08:00
这个好像是潘神的那个 admin 后台管理吧
你可以去搜下他的手把手文章 我记得有写传个 key 参数切换回来的时候回去请求新的数据 |
Select Language