问答

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

作者:admin 2021-05-13 我要评论

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

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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

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

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

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

###

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

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

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

###

读到 LocalStorage 里?

不过你得想好怎么处理过期,比如记录一个上次加载时间之类的,如果在 24 小时前就认为过期了需要从重新调接口之类的,不然服务端数据变了你这都还一直是老数据。

###

不放入vuex中,存到localstorage中行不

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue对于一些共通数据F5刷新页面时如何

    vue对于一些共通数据F5刷新页面时如何

  • DolphinDB中如何查询自己或者他人定义

    DolphinDB中如何查询自己或者他人定义

  • requests用IP直连时无法用代理怎么办?

    requests用IP直连时无法用代理怎么办?

  • antd样式在shadow DOM中不显示要怎么解

    antd样式在shadow DOM中不显示要怎么解

腾讯云代理商
海外云服务器