vue实现点赞案例

Vue 点赞功能实现

在Vue中实现点赞功能可以通过数据绑定和事件处理来完成。以下是几种常见的实现方式：

基础实现

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

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

带动画效果的实现

<template>
  <button @click="toggleLike" class="like-btn">
    <transition name="bounce">
      <span v-if="isLiked" key="liked">❤️</span>
      <span v-else key="unliked">♡</span>
    </transition>
    {{ likeCount }}
  </button>
</template>

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

与后端API交互的实现

methods: {
  async toggleLike() {
    try {
      const response = await axios.post('/api/like', {
        postId: this.postId,
        action: this.isLiked ? 'unlike' : 'like'
      })
      this.isLiked = !this.isLiked
      this.likeCount = response.data.likeCount
    } catch (error) {
      console.error('点赞操作失败', error)
    }
  }
}

使用Vuex管理点赞状态

// store.js
state: {
  likedPosts: []
},
mutations: {
  TOGGLE_LIKE(state, postId) {
    const index = state.likedPosts.indexOf(postId)
    if (index === -1) {
      state.likedPosts.push(postId)
    } else {
      state.likedPosts.splice(index, 1)
    }
  }
}

// 组件中
computed: {
  isLiked() {
    return this.$store.state.likedPosts.includes(this.postId)
  }
},
methods: {
  toggleLike() {
    this.$store.commit('TOGGLE_LIKE', this.postId)
  }
}

防抖处理防止重复点击

import { debounce } from 'lodash'

methods: {
  toggleLike: debounce(function() {
    // 点赞逻辑
  }, 500)
}

这些实现方式可以根据具体需求进行组合和调整，满足不同场景下的点赞功能需求。