Vue美食杰项目个人主页

条件：

        登录自己的个人主页(可以不需要传入id)

        登录他人的个人主页(需要传入id)

登录自己的个人空间时，只需要路由跳转到指定的个人空间的页面，数据拿vuex中的数据即可，因为之前在router的index里之前来判断token值是否合法就是请求了用户的信息数据,之后又通过vuex中的事件把数据传给了vuex的state

<router-link to="/space" class="user-name">{{userInfo.name}}</router-link>

登录别人的个人主页要调用我们之前设置的api组件的请求,先引入到组件中,调用请求的接口,拿到数据赋值给一个对象,登录别人的个人主页要userId值,来判断登录的是谁的个人主页,这时需要监听路由

<router-link :to="{name:'space',query:{userId:item.userId}}" tag="em">
            作者:{{item.name}}
</router-link>

监听路由：

data(){
    isOwner:false,
    userInof:{}
}, 
watch:{
      $route:{
        //
        async handler(){
          //当前路由中结构赋值给id
          let {userId} = this.$route.query;
            console.log(userId)
            this.isOwner = !userId || userId === this.$store.state.userInfo.userId;
          //如果为true，就把vuex的数据重新赋值给data的userInfo
          if(this.isOwner){
                this.userInfo = this.$store.state.userInfo;
            }else{//否则就是别人的空间
            //得请求api里的userinfo同步请求
             const data = await userInfo({userId})
            //请求到的数据通过传入参数userid值来跳入不同的别人主页
            this.userInfo = data.data
             console.log(this.userInfo)
            }
            this.activeName= this.$route.name;
            this.getInfo()
        },
        // 深度监听,立即执行
        immediate:true
      }
  },

拿到数据渲染即可：

到这一步就可以判断

        在自己的个人主页中出现"编辑个人资料"，不可以出现关注

        在别人的个人主页中出现关注，不可以出现"编辑个人资料"

data中设置了一个isOwner：false的属性，又把this.isOwner赋值给没有userid参数，和点击自己作品是有userid值的，可以把userid值等于vuex数据中的userid了，所以这段代码确定了isOwner这个属性他是自己的个人主页

this.isOwner = !userId || userId === this.$store.state.userInfo.userId;

直接拿这个isOwner在个人主页的编辑个人资料的标签中加入v-if=”isOwner“,在关注的标签里页设置v-if=”!isOwner“,这里要取反，当isOwner等于true时显示”编辑个人资料“，取反则显示关注

关注和已关注api接口：

/**
 * 拿到用户发布的菜谱，可做筛使用选
 * @export
 * @param {Object} [params] - 不填写，则获取所有的菜谱
 * @param {string} [params.userId] - 指定用户的菜单
 * @param {string} [params.classify] - 按照菜单分类，进行筛选
 * @param {string} [params.property] - 指定菜单属性进行筛选
 * @param {string} [params.property.craft] - 按工艺筛选
 * @param {string} [params.property.flavor] - 按口味筛选
 * @param {string} [params.property.hard] - 按难度筛选
 * @param {string} [params.property.people] - 按人数筛选
 * @param {string} [params.page] - 指定页码
 * @returns
 */
export async function getMenus(params){
  return await http.get('/menu/query', {params});
}

引入到个人主页的组件中，给关注按钮添加事件，添加之后在事件中，用async/await来请求数据，里面必须要有followUserid属性要关注用户的id

 <div class="tools" v-if="!isOwner">
          <!-- follow-at  no-follow-at-->
				  <a href="javascript:;" class="follow-at"
          :class="{'no-follow-at ' :userInfo.isFollowing}" @click="toggleFollowing"
          >
          {{userInfo.isFollowing ? '已关注':'+关注'}}
          </a>
        </div>

关注和已关注是通过数据中的isFollowing的true已关注和false关注来控制的，当我们调用接口并吧新的数据进行整体赋值，里面的isFollowing也就变为true，所以就会显示已关注

methods：{
     async toggleFollowing(){
      const {data} = await toggleFollowing({followUserId:this.userInfo.userId})
        this.userInfo = data
      },
}