头条项目05

文章评论列表，文章评论列表的话还是用到了我们熟悉的vant里的list组件

使用了v-model进行了父子组件的数据通信

关注用户功能:
先封装请求函方法, 然后给关注按钮注册点击事件。 
在事件函数中判断用户是否登录, 如未登录, 则 return 出来, 并提示用户登录，如果已登录则进行下一个关注的判断。 
如果已关注，则取消关注，如果没有关注，则添加关注。然后将视图进行更新,给值取反, 因为子组件不能直接修改, 使用 $emit 将值传给父组件 
为了防止用户频繁点击和用户的交互反馈, 设置一个变量来控制是否处于加载中(默认为false), 在触发点击事件时, 将变量设置为true, 开启按钮的 loading 状态, 在函数结束时,再将变量设置为 false, 关闭 loading 状态。

async onFollow () {  
// 如果没有登录，就不允许操作
  if(!this.$store.state.user) return this.$toast('请登录！')
    
  // 开启按钮的 loading 状态
  this.isFollowLoading = true
 
  try {
    // 如果已关注，则取消关注
    const authorId = this.article.aut_id
    if (this.article.is_followed) {
      await deleteFollow(authorId)
    } else {
      // 否则添加关注
      await addFollow(authorId)
    }
 
    // 更新视图
    this.article.is_followed = !this.article.is_followed
  } catch (err) {
    if(err && err.response.status === 400){
        this.$toast('你不能关注自己')
    }else{
        this.$toast.fail('操作失败')
    }
  }
 
  // 关闭按钮的 loading 状态
  this.isFollowLoading = false
}

v-model
用来双向数据绑定, 是 value 属性和 input 事件的语法糖
运用: 当我们的父组件通过props传递某个数据给子组件，且子组件需要通过自定义事件$emit去修改该数据，也就是父子之间共同操作同一个变量数据，我们可以使用v-model指令
即 当一个组件上面同时有 value属性和 input自定义事件的时候，且操作的是同一个变量，可使用 v-model来简化 (一个组件标签只能有一个 v-model 指令)
文章收藏：
给收藏按钮注册点击事件, 如果已经收藏了, 则取消收藏, 如果没有收藏, 则添加收藏 
文章评论：
准备组件：为了更好的开发和维护，这里我们把文章评论单独封装到一个组件中来处理。      
父组件将文章id传给子组件 ：<comment-list :source="article.art_id"/> 
子组件调用方法,传递文章类型、文章id等参数获取评论列表信息， 将获取的数据添加到列表中。

props: {
    source: {
      type: [Number, String, Object],
      required: true
    }
 }