登录自己的主页直接跳转,登录别人的主页需要id值
1.登录自己的主页时不要userld值,直接通过路由跳转到个人页面,拿到vuex的数据
然后判断token是否合法 请求用户信息,然后通过vuex传递vuex的state
2.登录别人的个人主页调用之前的api组件,引入组件,调用请求接口,拿到数据给对
象,要userld值,来判断是谁的个人主页,这就是监听路由 然后在渲染。
watch:{
$route:{
async handler(){
let {userId} = this.$route.query;
this.isOwner = !userId || userId === this.$store.state.userInfo.userId;
if(this.isOwner){//自己的空间
this.userInfo = this.$store.state.userInfo;
}else{//别人的空间
const data = await userInfo({userId});
console.log(data)
this.userInfo = data.data
// this.isFollowing = data.data.isFollowing;
}
this.activeName = this.$route.name;
this.getInfo();
},
immediate:true,
}
},
样式图:
设置一个isOne:false的data属性,又把this.isOne赋值等于没有userld
参数和点击自己作品在vuex数据中有userld值确定了isOne这个属性就
是自己个人主页
关注和已关注
我们先去api的组件中去拿 关注 取消关注的请求
/**
* toggle 关注。关注的取消关注;没关注的,要关注。
* @export
* @param {Object} [params] -
* @param {string} [params.followUserId] - 指定要关注的用户的id
* @returns
*/
export async function toggleFollowing(params){
return await http.post('/user/following', params);
}
然后引到组件中,添加事件:
<div class="tools" v-if="!isOwner">
<a href="javascript:;"
class="follow-at"
:class="{'no-follow-at' : userInfo.isFollowing}"
@click="toggleFollowing" >
{{ userInfo.isFollowing ? '已关注' : '+关注'}}
</a>
</div>
然后进行整体赋值数据:
methods:{
async toggleFollowing(){
console.log('sss')
const {data} = await toggleFollowing({followUserId:this.userInfo.userId})
// 因为关注后,要更新数据还有粉丝,所以整体赋值数据
this.userInfo = data
},
}