添加點贊事件

打開 src/store/actions.js 文件，在代碼的最後面，導出點贊事件 like：

src/store/actions.js

 1 .
 2 .
 3 .
 4 // 參數 articleId 是文章 ID；isAdd 為 true 時點贊，為 false 時取消贊
 5 export const like = ({ commit, state }, { articleId, isAdd }) => {
 6   // 倉庫的文章
 7   let articles = state.articles
 8   // 點贊用戶列表
 9   let likeUsers = []
10
 
   // 用戶 ID，默認為 1
11   const uid = 1
12 
13   if (!Array.isArray(articles)) articles = []
14 
15   for (let article of articles) {
16     // 找到對應文章時
17     if (parseInt(article.articleId) === parseInt(articleId)) {
18       // 更新點贊用戶列表
19       likeUsers = Array.isArray(article.likeUsers) ? article.likeUsers : likeUsers
 
20 
21       if (isAdd) {
22         // 是否已贊
23         const isAdded = likeUsers.some(likeUser => parseInt(likeUser.uid) === uid)
24 
25         if (!isAdded) {
26           // 在點贊用戶列表中加入當前用戶
27           likeUsers.push({ uid })
28         }
29       } else {
30         for (let likeUser of likeUsers) {
 
31           // 找到對應點贊用戶時
32           if (parseInt(likeUser.uid) === uid) {
33             // 刪除點贊用戶
34             likeUsers.splice(likeUsers.indexOf(likeUser), 1)
35             break
36           }
37         }
38       }
39 
40       // 更新文章的點贊用戶列表
41       article.likeUsers = likeUsers
42       break
43     }
44   }
45 
46   // 提交 UPDATE_ARTICLES 以更新所有文章
47   commit(‘UPDATE_ARTICLES‘, articles)
48   // 返回點贊用戶列表
49   return likeUsers
50 }

點贊事件的最後面使用 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

 1 like(e) {
 2   // 未登錄時，提示登錄
 3   if (!this.auth) {
 4     this.$swal({
 5       text: ‘需要登錄以後才能執行此操作。‘,
 6       confirmButtonText: ‘前往登錄‘
 7     }).then((res) => {
 8       if (res.value) {
 9         this.$router.push(‘/auth/login‘)
10       }
11     })
12   } else {
13     const target = e.currentTarget
14     // 點贊按鈕是否含有 active 類，我們用它來判斷是否已贊
15     const active = target.classList.contains(‘active‘)
16     const articleId = this.articleId
17 
18     if (active) {
19       // 清除已贊樣式
20       this.likeClass = ‘‘
21       // 分發 like 事件取消贊，更新實例的 likeUsers 為返回的值
22       this.$store.dispatch(‘like‘, { articleId }).then((likeUsers) => {
23         this.likeUsers = likeUsers
24       })
25     } else {
26       // 添加已贊樣式
27       this.likeClass = ‘active animated rubberBand‘
28       // 分發 like 事件，傳入 isAdd 參數點贊，更新實例的 likeUsers 為返回的值
29       this.$store.dispatch(‘like‘, { articleId, isAdd: true }).then((likeUsers) => {
30         this.likeUsers = likeUsers
31       })
32     }
33   }
34 },

調用 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‘，來判斷顯示 已贊 或者 點贊。

添加點贊功能