获取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)
})
})
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
