添加點贊功能

添加點贊事件

打開 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'，來判斷顯示 已贊 或者 點贊。