美食杰(用户主页)

登录自己的主页直接跳转，登录别人的主页需要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
    },
}

       

                                 谢谢支持！！！