当前位置：首页 > VUE

vue怎么实现点赞

2026-02-22 00:59:25VUE

实现点赞功能的基本思路

在Vue中实现点赞功能通常涉及前端交互与后端数据同步。核心逻辑包括：点击按钮触发事件、更新本地状态、发送请求到后端保存数据。以下是具体实现方法：

基础实现（纯前端演示）

适用于不需要持久化数据的场景：

<template>
  <button @click="toggleLike">
    {{ isLiked ? '取消点赞' : '点赞' }} ({{ likeCount }})
  </button>
</template>

<script>
export default {
  data() {
    return {
      isLiked: false,
      likeCount: 42
    }
  },
  methods: {
    toggleLike() {
      this.isLiked = !this.isLiked
      this.likeCount += this.isLiked ? 1 : -1
    }
  }
}
</script>

结合后端API的实现

需要与服务器交互时的完整方案：

vue怎么实现点赞

<template>
  <button 
    @click="handleLike" 
    :disabled="loading"
    :class="{ 'active': isLiked }"
  >
    <span v-if="loading">处理中...</span>
    <span v-else>{{ isLiked ? '已赞' : '点赞' }} ({{ likeCount }})</span>
  </button>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    itemId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      isLiked: false,
      likeCount: 0,
      loading: false
    }
  },
  mounted() {
    this.fetchLikeStatus()
  },
  methods: {
    async fetchLikeStatus() {
      const res = await axios.get(`/api/likes/${this.itemId}`)
      this.isLiked = res.data.isLiked
      this.likeCount = res.data.count
    },
    async handleLike() {
      this.loading = true
      try {
        const action = this.isLiked ? 'unlike' : 'like'
        await axios.post(`/api/likes/${this.itemId}/${action}`)
        this.isLiked = !this.isLiked
        this.likeCount += this.isLiked ? 1 : -1
      } catch (error) {
        console.error('操作失败', error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
button.active {
  color: red;
}
</style>

优化方案（防抖处理）

防止用户快速重复点击：

import _ from 'lodash'

export default {
  methods: {
    handleLike: _.debounce(async function() {
      // 原有逻辑
    }, 500)
  }
}

使用Vuex管理全局状态

当多个组件需要共享点赞状态时：

vue怎么实现点赞

// store/modules/likes.js
export default {
  state: {
    likes: {}
  },
  mutations: {
    SET_LIKE(state, { id, status }) {
      Vue.set(state.likes, id, status)
    }
  },
  actions: {
    async toggleLike({ commit }, itemId) {
      const res = await api.toggleLike(itemId)
      commit('SET_LIKE', { id: itemId, status: res.data.isLiked })
      return res.data
    }
  }
}

组件中通过mapState和mapActions使用：

import { mapState, mapActions } from 'vuex'

computed: {
  ...mapState('likes', ['likes']),
  isLiked() {
    return this.likes[this.itemId] || false
  }
},
methods: {
  ...mapActions('likes', ['toggleLike'])
}

动画效果增强用户体验

添加点击动画效果：

<template>
  <transition name="bounce">
    <button v-if="showHeart" class="heart-icon">❤️</button>
  </transition>
</template>

<style>
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
@keyframes bounce-in {
  0% { transform: scale(0); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); }
}
</style>