vuex 数据共享以及异步问题

This topic created in 3358 days ago, the information mentioned may be changed or developed.

有一个大组件。里面包含四个子组件，我在第一个组件中请求接口获取了参数 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 replies 2017-03-07 15:03:38 +08:00

xuxu

Mar 7, 2017

action 是异步的
mutation 才是实时分发状态的
值为空没调用 mutation 吧

echol

Mar 7, 2017

不是很明白要做什么
是不是可以
1. getCityInfo 后 return {a: ..., b: ...}, 然后在之后的组件拿到
2. 把 ab 保存成大组件的状态

cococoder

Mar 7, 2017

@xuxu 在其他组件触发 action ，因为需要 a 和 b ，但是此时 a 和 b 为空，不是没有调用 mutation ，其他的组件触发的 action 操作大概如下：
fetch('GET',url,{a:a,b:b}).then(回调);

cococoder

Mar 7, 2017

@echol 这样是可以实现组件之间的数据共享，但是还是实现不了在不懂页面之间的共享，所以 a 和 b 需要保存在 state 上

echol

Mar 7, 2017

@cococoder 没问题啊， getCityInfo commit() + return...