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

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

读到 LocalStorage 里？

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

Answer 3

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