如何获取this.$store.dispatch的返回值
更新时间:2023年01月10日 10:54:55 作者:三分恶
这篇文章主要介绍了如何获取this.$store.dispatch的返回值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
获取this.$store.dispatch的返回值
this.$store.dispatch() 是用来传值给vuex的mutation改变state。
我们来看看怎么获取this.$store.dispatch() 调用的返回值。
Action
首先看看定义的Action:
login({ commit }, userInfo) { // const { username, password } = userInfo return new Promise((resolve, reject) => { login(userInfo).then(response => { const { data } = response commit('SET_TOKEN', data.token) setToken(data.token) resolve(response) }).catch(error => { reject(error) }) }) },
两个关键点:
- 返回一个new Promise
return new Promise((resolve, reject)
- resolve函数中传入返回值
resolve(response)
调用
this.$store.dispatch('user/login', this.loginForm) .then(res => { console.log(res) fullLoading.close(); //登陆首页还是之前访问需要重定向的地址 this.$router.push({ path: this.redirect || '/' }) this.loading = false }) .catch(error => {}
在调用里就可以直接通过 res 来直接获取返回值了。
.then(res => { console.log(res)
根据vuex的this.$store.dispatch()返回值处理逻辑
App.vue
const ret = await this.$store.dispatch('userLogin', { username: this.curUserName, password: this.curPassword }) if (ret && ret.info) { this.$message.success(ret.info) await this.$store.dispatch('controlLoginDialog', false) } else { this.$message.warning(ret) }
vuex/store/action.js
async userLogin ({commit}, account) { let userInfo = {} return new Promise((resolve, reject) => { requestUserLogin(account).then(response => { if (response.status === 200) { if (response.data.data) { userInfo = response.data.data userInfo.userName = userInfo.name userInfo.isLogin = true resolve({ info: userInfo.userName + ' 登录成功,欢迎进入百度云智学院实验平台' }) } else if (response.data.fail) { userInfo.userName = '' userInfo.isLogin = false myConsole('response.data.fail') resolve(response.data.fail) } } else { userInfo.userName = '' userInfo.isLogin = false } commit(USER_LOGIN, {userInfo}) }).catch(err => { myConsole(err) reject(err) }) }) },
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue中的el-date-picker时间选择器的使用实例详解
el-date-picker是Element UI框架中提供的日期选择器组件,它支持单个日期、日期范围、时间、日期时间等多种选择方式,本文给大家介绍Vue中的el-date-picker时间选择器的使用,感兴趣的朋友一起看看吧2023-10-10vue3 + vite + ts 中使用less文件全局变量的操作方法
这篇文章主要介绍了vue3 + vite + ts 中使用less文件全局变量的操作方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03让 babel webpack vue 配置文件支持智能提示的方法
这篇文章主要介绍了让 babel webpack vue 配置文件支持智能提示的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06Vue项目中CSS Modules和Scoped CSS的介绍与区别
在vue中我们有两种方式可以定义css作用域,一种是scoped,另一种就是css modules,下面这篇文章主要给大家介绍了关于Vue项目中CSS Modules和Scoped CSS的相关资料,需要的朋友可以参考下2022-03-03
最新评论