vuex 派发action进行异步获取数据

在vuex里 我想统一管理异步的操做,受到redux-thunk的启发,能够让vuex派发action,在action执行异步请求axios,在把异步获取的数据到mutation,但感受这么作会把接口数据跟state绑定,感受仍是按照具体环境灵活应用较好。vue

假如我组件的mounted 有这么个获取接口数据的方法 getGeneios

getGene(){
      this.$store.dispatch('getGeneAction');
      //getDatamingData().then(this.getGeneSucc);
      /*
      axios.get(urlApi.datamining)
           .then(this.getGeneSucc);
      */
    },

*注释掉的是之前直接在方法中获取接口数据vuex

在个人store里actions.jsredux

getGeneAction(ctx,item){
    console.log('getGeneAction');
    //调用axios
    getDatamingData().then((res) => {
      ctx.commit('GETGENEMUTATION',res);
    });
  }

派发一个GETGENEMUTATION mutationaxios

GETGENEMUTATION(state,item){
    //console.log(item.data.obj);
    state.geneObj = item.data.obj;
  }

这样就有了一个vuex异步

 

我以前的作法是在父组件获取异步数据 而后把数据再派发给子组件 子组件在对数据进行vuex操做 。this

 

 具体如何管理数据仍是看具体的环境。url

相关文章
相关标签/搜索