vuex 数据共享以及异步问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 2605 天前的主题，其中的信息可能已经有所发展或是发生改变。

有一个大组件。里面包含四个子组件，我在第一个组件中请求接口获取了参数 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 时期发生的

组件

msg

State

请求

5 条回复 • 2017-03-07 15:03:38 +08:00

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...