如何在vuex的action里 调用axios的promise方法并return出去方便组件调用

Question

我在store.js里定义了一个axios请求方法

但是由于在store.js里写axios成功不能调用vue路由的跳转以及调用elementUI的组件，所以我只是想把请求封装到actions里，成功失败后的回调（.then .catch）还是在组件里写
我看了下官方文档

可以return一个promise对象，axios官方文档也说可以调用promise方法，我在login.vue里是这样写的
login.vue

但是无效，请问我在actions里应该如何调用axios的promise方法，第一次写这个一点头绪都没，求高人指点

Answer 1

state: {
    userList: [],
},
mutations: {
    // 简化mutatios的代码量
    updateData(state, data) {
        state[data.key] = data.value;
    }
},
actions:{      
   getUserList: async function(contex) {
        let value = await axios('you api url').then(res => res.data);
        contex.commit("updateData", {
            key: "userList",
            value
        });
    }
 }

上面是一个直接更新到store的一个例子，如果要返回可以像下面这样，在组件里面可以同步使用返回的数据：

// actions.js
getUserList: async function(contex) {
    let value = await axios('you api url').then(res => res.data);
    return value;
}


// ***.vue

methods:{
    ...mapActions(["getUserList"]),
    getData(){
        const userList = this.getUserList();
        // 后续的处理
    }
}

如果要想把回调写在组件里面就应该是这样：

// actions.js
getUserList(contex) {
    return axios('you api url').then(res => res.data);
}

// ***.vue

methods:{
    ...mapActions(["getUserList"]),
    getDataAsync(){
        this.getUserList().then(res=>{
            // 后续的处理
        });
    },
    getDataSync:async function(){
        const data = await this.getUserList().then(res=>res.data);
        // 后续的处理
    }
}

对于题主的问题，建议在更新store.state，如果只是一个ajax请求，其返回的数据不在组件间共享，那么可以直接写在组件内部，不用走vuex。

Answer 2

首先axios方法得到的是一个promise，所以你只要在actions的login里return axios()就行了