美食杰项目---个人空间(1)

个人空间实现思路:

        1.显示别人的信息:地址栏中如果有userId,显示对应用户的数据

        2.显示自身的信息:如果地址栏中没有userId,默认显示自己的空间

点击登录进入个人空间页面

​​​​​​​

 

显示自己的信息有编辑个人资料

第一步:判断路由里面是否有参数,如果有就显示别人的空间 如果没有显示自己的空间

data(){
    return {
      userInfo:{},
      isOwner:false
    }
  }, 
watch:{
    $route:{ 
      async handler(){
        // 判断是否有值 
        let {userId} = this.$route.query;
        // 判断有没有数据 有数据是自己的就有自己的空间
        this.isOwner = !userId || userId === this.$store.state.userInfo.userId;
        if(this.isOwner){//自己的空间
          //直接从vuex中拿数据
          this.userInfo = this.$store.state.userInfo;
        }else{//别人的空间
          //把请求过来的userInfo中的参数赋值给data
          const data = await userInfo({userId}); //本行代码中的userInfo是vuex中的数据
          console.log(data)
          //把请求过来的数据赋值给空数组userInfo
          this.userInfo = data.data;        //本行代码的userInfo是data中的空对象
        }
        
      },
      // 立即执行
      immediate:true,
    }
  },

第二步在别人的空间有关注 点击关注粉丝数量+1,取消关注粉丝数量-1

<span class="info">
     <em>{{userInfo.createdAt}}加入美食杰</em>
          |
     <router-link :to="{name:'edit'}" v-if="isOwner">编辑个人资料</router-link>
</span>
<div class="tools" v-if="!isOwner">
     <!-- follow-at  no-follow-at-->
	 <a href="javascript:;" 
        class="follow-at"
        :class="{'no-follow-at' : userInfo.isFollowing}"
        @click="toggleHandler"
     >
         {{userInfo.isFollowing ? '已关注' : '+关注'}}
     </a>
</div>

 methods:{
    async toggleHandler(){
      const {data} = await toggleFollowing({followUserId:this.userInfo.userId});
      // console.log(data)
      // 因为关注后要更新的数据和粉丝,所以整体赋值数据
      this.userInfo = data
    }
  }

今天的学习内容就到这里啦  明天见!