vuex 数据共享以及异步问题

2017-03-07 14:09:48 +08:00
 cococoder

有一个大组件。里面包含四个子组件,我在第一个组件中请求接口获取了参数 a 和 b ,由于后面三个组件请求的有些接口都用到了参数 a 和 b ,在第一个组件请求的接口成功后我把 a 和 b 保存到看 state 里面,但是事实上后面三个组件在请求接口时 a 和 b 的值还是为空,请问有什么好的解决方案?

第一个组件触发的 action :

export default{
	getCityInfo({commit,state}){
    	return fetch('GET','/v1/cities',{type:'guess'}).then(msg =>{commit(mutation_types.GET_POSITION,msg);});
	}
}

mutations :

export default{
	[mutation_types.GET_POSITION](state,msg){
    	state.a = msg.a;
    	state.b = msg.b;
	}
}

因为在组件一还有其他的操作: getCityInfo.then(其他操作).then();

然后在组件二中需要 a 和 b ,所以我又要这样: getCityInfo.then(其他操作).then()

感觉很重复很冗余

备注:组件请求接口都是在 mounted 时期发生的

4568 次点击
所在节点    前端开发
5 条回复
xuxu
2017-03-07 14:21:27 +08:00
action 是异步的
mutation 才是实时分发状态的
值为空没调用 mutation 吧
echol
2017-03-07 14:34:50 +08:00
不是很明白要做什么
是不是可以
1. getCityInfo 后 return {a: ..., b: ...}, 然后在之后的组件拿到
2. 把 ab 保存成大组件的状态
cococoder
2017-03-07 14:51:11 +08:00
@xuxu 在其他组件触发 action ,因为需要 a 和 b ,但是此时 a 和 b 为空,不是没有调用 mutation ,其他的组件触发的 action 操作大概如下:
fetch('GET',url,{a:a,b:b}).then(回调);
cococoder
2017-03-07 14:53:05 +08:00
@echol 这样是可以实现组件之间的数据共享,但是还是实现不了在不懂页面之间的共享,所以 a 和 b 需要保存在 state 上
echol
2017-03-07 15:03:38 +08:00
@cococoder 没问题啊, getCityInfo commit() + return...

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/345571

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX