我在store.js里定义了一个axios请求方法但是由于在store.js里写axios成功不能调用vue路由的跳转以及调用elementUI的组件，所以我只是想把请求封装到actions里，成功失败后的回调（.then .catch）还是在组件里写我看了下官方文档可以return一个promise对象，axios官方文档也说可以调用promise方法，我在login.vue里是这样写的login.vue但是无效，请问我在actions里应该如何调用axios的promise方法，第一次写这个一点头绪都没，求高人指点
2 回答
茅侃侃
TA贡献1842条经验 获得超21个赞
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。
添加回答
举报
0/150
提交
取消