V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
cococoder
V2EX  ›  前端开发

vuex 数据共享以及异步问题

  •  
  •   cococoder · 2017-03-07 14:09:48 +08:00 · 4707 次点击
    这是一个创建于 2802 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    5 条回复    2017-03-07 15:03:38 +08:00
    xuxu
        1
    xuxu  
       2017-03-07 14:21:27 +08:00
    action 是异步的
    mutation 才是实时分发状态的
    值为空没调用 mutation 吧
    echol
        2
    echol  
       2017-03-07 14:34:50 +08:00
    不是很明白要做什么
    是不是可以
    1. getCityInfo 后 return {a: ..., b: ...}, 然后在之后的组件拿到
    2. 把 ab 保存成大组件的状态
    cococoder
        3
    cococoder  
    OP
       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
        4
    cococoder  
    OP
       2017-03-07 14:53:05 +08:00
    @echol 这样是可以实现组件之间的数据共享,但是还是实现不了在不懂页面之间的共享,所以 a 和 b 需要保存在 state 上
    echol
        5
    echol  
       2017-03-07 15:03:38 +08:00
    @cococoder 没问题啊, getCityInfo commit() + return...
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1325 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 23:31 · PVG 07:31 · LAX 15:31 · JFK 18:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.