添加点赞功能

添加点赞事件

打开 src/store/actions.js 文件，在代码的最后面，导出点赞事件 like：

src/store/actions.js

.
.
.
// 参数 articleId 是文章 ID；isAdd 为 true 时点赞，为 false 时取消赞
export const like = ({ commit, state }, { articleId, isAdd }) => {
  // 仓库的文章
  let articles = state.articles
  // 点赞用户列表
  let likeUsers = []
  // 用户 ID，默认为 1
  const uid = 1

  if (!Array.isArray(articles)) articles = []

  for (let article of articles) {
    // 找到对应文章时
    if (parseInt(article.articleId) === parseInt(articleId)) {
      // 更新点赞用户列表
      likeUsers = Array.isArray(article.likeUsers) ? article.likeUsers : likeUsers

      if (isAdd) {
        // 是否已赞
        const isAdded = likeUsers.some(likeUser => parseInt(likeUser.uid) === uid)

        if (!isAdded) {
          // 在点赞用户列表中加入当前用户
          likeUsers.push({ uid })
        }
      } else {
        for (let likeUser of likeUsers) {
          // 找到对应点赞用户时
          if (parseInt(likeUser.uid) === uid) {
            // 删除点赞用户
            likeUsers.splice(likeUsers.indexOf(likeUser), 1)
            break
          }
        }
      }

      // 更新文章的点赞用户列表
      article.likeUsers = likeUsers
      break
    }
  }

  // 提交 UPDATE_ARTICLES 以更新所有文章
  commit('UPDATE_ARTICLES', articles)
  // 返回点赞用户列表
  return likeUsers
}

点赞事件的最后面使用 return 返回了 likeUsers，我们稍后将从分发事件的回调函数里获取该值。

 

在页面上点赞

1、打开 src/views/articles/Content.vue 文件，在 data 中添加 likeUsers 和 likeClass：

src/views/articles/Content.vue

data() {
  return {
    title: '', // 文章标题
    content: '', // 文章内容
    date: '', // 文章创建时间
    uid: 1, // 用户 ID
    likeUsers: [], // 点赞用户列表
    likeClass: '', // 点赞样式
  }
},

2、修改 created 钩子（注释部分是涉及的修改）：

created() {
  const articleId = this.$route.params.articleId
  const article = this.$store.getters.getArticleById(articleId)

  if (article) {
    // 获取当前文章的 likeUsers
    let { uid, title, content, date, likeUsers } = article

    this.uid = uid
    this.title = title
    this.content = SimpleMDE.prototype.markdown(emoji.emojify(content, name => name))
    this.date = date
    // 更新实例的 likeUsers
    this.likeUsers = likeUsers || []
    // 更新 likeClass，点赞用户列表包含当前用户时，赋值为 active，表示已赞
    this.likeClass = this.likeUsers.some(likeUser => likeUser.uid === 1) ? 'active' : ''

    this.$nextTick(() => {
      this.$el.querySelectorAll('pre code').forEach((el) => {
        hljs.highlightBlock(el)
      })
    })
  }

  this.articleId = articleId
},

3、在 methods 选项中，添加点赞方法 like：

src/views/articles/Content.vue

like(e) {
  // 未登录时，提示登录
  if (!this.auth) {
    this.$swal({
      text: '需要登录以后才能执行此操作。',
      confirmButtonText: '前往登录'
    }).then((res) => {
      if (res.value) {
        this.$router.push('/auth/login')
      }
    })
  } else {
    const target = e.currentTarget
    // 点赞按钮是否含有 active 类，我们用它来判断是否已赞
    const active = target.classList.contains('active')
    const articleId = this.articleId

    if (active) {
      // 清除已赞样式
      this.likeClass = ''
      // 分发 like 事件取消赞，更新实例的 likeUsers 为返回的值
      this.$store.dispatch('like', { articleId }).then((likeUsers) => {
        this.likeUsers = likeUsers
      })
    } else {
      // 添加已赞样式
      this.likeClass = 'active animated rubberBand'
      // 分发 like 事件，传入 isAdd 参数点赞，更新实例的 likeUsers 为返回的值
      this.$store.dispatch('like', { articleId, isAdd: true }).then((likeUsers) => {
        this.likeUsers = likeUsers
      })
    }
  }
},

调用 store.dispatch 默认返回一个 Promise 对象，表示一个异步操作的最终状态及其返回的值，因此我们可以在 .then 的回调函数里获取 likeUsers。

4、查找 <div class="panel article-body content-body">，在其后面添加『点赞』：

src/views/articles/Content.vue

<div class="panel article-body content-body">
  .
  .
  .
</div>

<!-- 点赞 -->
<div class="votes-container panel panel-default padding-md">
  <div class="panel-body vote-box text-center">
    <div class="btn-group">
      <a @click="like" href="javascript:;" class="vote btn btn-primary popover-with-html" :class="likeClass">
        <i class="fa fa-thumbs-up"></i> {{ likeClass ? '已赞' : '点赞' }}
      </a>
    </div>
    <div class="voted-users">
      <div class="user-lists">
        <span v-for="likeUser in likeUsers">
          <!-- 点赞用户是当前用户时，加上类 animated 和 swing 以显示一个特别的动画  -->
          <img :src="user && user.avatar" class="img-thumbnail avatar avatar-middle" :class="{ 'animated swing' : likeUser.uid === 1 }">
        </span>
      </div>
      <div v-if="!likeUsers.length" class="vote-hint">成为第一个点赞的人吧 ?</div>
    </div>
  </div>
</div>

在模板中，我们根据 likeClass 是否包含 'active'，来判断显示 已赞 或者 点赞。