项目：vue＋element
场景：在系统登录进行axios调用的时候，如果请求成功会有消息提示框，提示登录成功。
控制台报错：Cannot read property ‘$message’ of undefined
原因:
vue实例中this指的是vue本身，通过this就可以调用vue对象的所有api。
出现上述问题则说明，当前的this对象发生了改变，无法调用$message方法。
箭头函数并不简单是匿名函数的简写：在JS中，箭头函数和匿名函数有一个明显的区别：箭头函数内部的this是词法作用域，在编写函数时就已经确定了。而匿名函数的this指向运行时实际调用该方法的对象，无法在编写函数时确定this对象指的是哪个对象。
解决办法一var that = this;：
export const login = data => {
return request({
method: 'post',
url: '/api/user/login',
data: data
})
}
loginBtn() {
this.$refs.loginFromRef.validate(async (valid) => {
//登录前的一个预验证
if (!valid) return;
var that = this;
login(this.loginForm)
.then(function (res) {
if (res.data.code == "200") {
that.$message.success("登录成功");
window.sessionStorage.setItem("token", res.data.data.token);
that.$router.push("/layout");
} else {
that.$message.error("登录失败,请检查账号密码是否正确");
}
})
.catch(function () {
that.$message.error("登录失败,请检查账号密码是否正确");
});
});
},
解决办法二箭头函数：
箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止
export const login = data => {
return request({
method: 'post',
url: '/api/user/login',
data: data
})
}
loginBtn() {
this.$refs.loginFromRef.validate(async (valid) => {
//登录前的一个预验证
if (!valid) return;
login(this.loginForm)
.then(res => {
if (res.data.code == "200") {
this.$message.success("登录成功");
window.sessionStorage.setItem("token", res.data.data.token);
this.$router.push("/layout");
} else {
this.$message.error("登录失败,请检查账号密码是否正确");
}
})
.catch( (error)=> {
this.$message.error("登录失败,请检查账号密码是否正确");
});
});
},