vue.js - vuex跟vue router和vue resource结合，怎么实现data钩子函数异步 resolve?

问题描述

问 题

我有一个vue项目是vuex 跟vue router和vue resource结合的，然后我有一个列表是从服务器异步获取数据再显示的，我在vue组件的route的data钩子函数中要调用一个vuex的action获取数据，action是用vue resource写的

代码如下：
home.vue

<div v-if="$loadingRouteData">loading...</div>
<div v-else>
    <list v-for="item in list">list...</list
</div>

vuex: {
    getters: {
        list: listGetters
    },
    actions: {
        getList
    }
},

route: {
    data () {
        this.getList();
    }
},

actions.js

export const getList= ({dispatch}) => {
    api.getList().then(response => {
        if (!response.ok) {
            return dispatch('GET_LIST_FAILURE');
        } else {
            dispatch('GET_LIST_SUCCESS', { list: response.list });
        }
    }, response => {
        dispatch('GET_LIST_FAILURE');
    })
}

我看vue router的文档说要在data钩子函数里面返回一个promise，但我的getList是包含一个vue resource的promise的，但是我在data钩子函数里如上面代码直接调用的话是同步resolve的，怎么实现在数据获取之后变为resolve?

解决方案

因为api.getList()函数是调用vue resource然后返回一个promise，所以在函数前面都加上return返回promise即可。

home.vue

route: {
    data () {
        return this.getList();
    }
},

action.js

export const getList= ({dispatch}) => {
    return api.getList().then(response => {
        if (!response.ok) {
            return dispatch('GET_LIST_FAILURE');
        } else {
            dispatch('GET_LIST_SUCCESS', response.list);
        }
    }, response => {
        dispatch('GET_LIST_FAILURE');
    })
}

api.js

getList: function (page = 1) {
    return Vue.http.get('list', {page}); // 这里返回的 get() 函数是一个promise，所以在上面两个文件中继续 return 这个 promise 即可
},

这篇关于vue.js - vuex跟vue router和vue resource结合，怎么实现data钩子函数异步 resolve?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！