javascript - vuex数据共享以及异步问题
巴扎黑
巴扎黑 2017-04-11 12:27:43
[JavaScript讨论组]

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

巴扎黑
巴扎黑

全部回复(2)
迷茫

我猜想大概是因为异步问题,在a,b还没有被赋值的时候,后面三个组件就使用了,是这样吧?
这个问题官方文档有个很好的解决方案,使用action时配合Promise 或者 async/awiat能够狠优雅的处理异步造成的问题。
(关于vuex的组合action的官方文档介绍)[https://vuex.vuejs.org/zh-cn/...组合-actions]

不知道我是不是理解你的问题了……

ringa_lee

promise,判断a,b参数为空先租塞请求

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号