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

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

慕斯王
浏览 1448回答 1
1回答

青春有我

同一个入口的话,就放最外边的组件App.vue里呗。还是得看你们的数据自己拿捏。没有固定的获取地方,只有选择最合适的。1、比如你的行政区划数据,这类静态数据,直接存 localStorage 就没问题。2、像获取用户信息数据,适合放根组件获取,因为很多地方可能用到。3、又比如若干组件共享一组数据,就可以把这些组件统一起来放在某一父组件下,然后只要在父组件获取数据就可以了。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Vue.js