Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.8k views
in Technique[技术] by (71.8m points)

vue对于一些共通数据F5刷新页面时如何避免重复请求

1.首页页面,
2.5个el-dialog组件
3.每个组件都会用到一个共通的数据(比如地区数据)
4.这个共通数据必须在页面created时调用, 否则这个数据相关的功能不能使用.

我的解决方案:
是在app.vue页面中就调用这个共通数据的接口, 并放入vuex中管理起来,
这样这些用到共通数据的组件就可以直接使用.

症结: 正常使用是没有问题的,
如果在首页F5刷新一下的话, vuex数据因为会被清空, 所以5个el-dialog组件需要在created重新请求一下这个共通数据,

在console中会看到这个相同的接口, 被请求了5次, 感觉很浪费, 请问各路大神, 有没有优化的好办法. 谢谢


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

==
我觉得本质并不是想把地区数据在前端持久化,并且我也不觉得这是一个好主意。

放在vuex是正确的选择,你是想避免多次请求吧?
可以考虑再vuex中使用一个正在获取数据的标记。
当actions触发的时候,首先检查是否已有数据,如果有则不获取;没有则检查标记,有标记则不获取;没有数据,没有标记则获取数据,并打标记。

然后在每个组件created的时候都调用dispatch即可。
一个示例:
https://github.com/Lushenggan...


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...