当第一次登录成功之后,个人中心页面可以获取到用户的profile
这是login组件,通过触发action来对state中的user进行赋值
let res = await this.$store.dispatch('login',{phone:this.phone,password:this.password});
if(res.data.code == 200){
localStorage.setItem('token',res.data.token);
let result = await getUserInfo(res.data.account.id);
this.updateUser(result.data.profile);
this.$router.push('/userinfo');
}else{
alert('手机号或者密码错误!');
this.phone = '';
this.password = '';
}
userinfo组件通过vuex中state里的user值来获取
mounted() {
this.userinfo = this.user;
console.log(this.userinfo);
// 第一次登录成功可以获取到
// 页面刷新之后值为{}
}
解决方案
我将第一次登录成功后获取到的用户数据存储到sessionStorage中,在第二次判断如果该值为’{}'的话,就从已经登录成功的sessionStorage中获取值
mounted() {
this.userinfo = this.user;
console.log(this.userinfo);
if (JSON.stringify(this.userinfo) !== "{}") {
sessionStorage.setItem("userinfo", JSON.stringify(this.userinfo));
} else {
this.userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
console.log(this.userinfo);
}
}