多个组件如何用Vuex优雅的共享数据？

Question

多个页面组件（.vue文件）由团队中不同的开发者写的，这些页面中都会用到一组行政区划数据，这个数据需要用Axios调用后台接口取得，这个数据对于同一个用户是不变的，多个页面组件使用的应是同一份数据。这些页面组件访问顺序不固定。那么，我的问题是，哪个页面来负责调用axios取值，并放到store中呢？每个页面都要调用的话，同一份数据会取多次肯定是不合理的，那是否每个页面都要先判断这个值是否存在，不存在则调用actions取值并放入store中，并watch这个值变化后，再getter这个值呢？感觉这个判断逻辑很麻烦，而且还要求所有页面都要这样写，在代码风格协调上也要花时间，能否把这些判断逻辑封装，页面直接调用呢？请问实践上大家是怎么用的？以往后端用缓存的经验是，提供一个工具类和方法供调用，这个方法中封装了取数据的代码，先判断缓存中是否存在，存在则返回，不存在则从数据库获取后放入缓存，再返回，调用方只需要调这个方法就行了，但这不是异步的实现，不知vuex能否这样用呢？

Answer 1

同一个入口的话，就放最外边的组件App.vue里呗。

---

还是得看你们的数据自己拿捏。没有固定的获取地方，只有选择最合适的。
1、比如你的行政区划数据，这类静态数据，直接存 localStorage 就没问题。
2、像获取用户信息数据，适合放根组件获取，因为很多地方可能用到。
3、又比如若干组件共享一组数据，就可以把这些组件统一起来放在某一父组件下，然后只要在父组件获取数据就可以了。