当前位置：首页 > VUE

vue中点赞的实现

2026-02-21 09:48:37VUE

Vue 中点赞功能的实现

在 Vue 中实现点赞功能通常需要处理以下核心逻辑：状态管理、UI 交互、数据持久化（如调用 API）。以下是几种常见的实现方式：

基础实现（组件内状态）

<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

通过 axios 发送请求更新后端数据：

vue中点赞的实现

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

使用 Vuex 管理全局状态

适用于多组件共享点赞状态：

vue中点赞的实现

// store.js
const store = new Vuex.Store({
  state: {
    likes: {}
  },
  mutations: {
    SET_LIKE(state, { postId, isLiked, count }) {
      Vue.set(state.likes, postId, { isLiked, count });
    }
  },
  actions: {
    async toggleLike({ commit }, postId) {
      const current = this.state.likes[postId];
      const newStatus = !current?.isLiked;
      const res = await api.updateLike(postId, newStatus);
      commit('SET_LIKE', {
        postId,
        isLiked: newStatus,
        count: res.count
      });
    }
  }
});

防抖优化

防止用户快速连续点击：

import { debounce } from 'lodash';

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

动画效果

添加过渡动画增强用户体验：

<transition name="fade">
  <span v-if="isLiked" class="heart-icon">❤</span>
</transition>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>