如何在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.jsgetUserList: async function(contex) {    let value = await axios('you api url').then(res => res.data);    return value;}// ***.vuemethods:{    ...mapActions(["getUserList"]),    getData(){        const userList = this.getUserList();        // 后续的处理    }}如果要想把回调写在组件里面就应该是这样：// actions.jsgetUserList(contex) {    return axios('you api url').then(res => res.data);}// ***.vuemethods:{    ...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()就行了