当前位置：首页 > VUE

vue 实现收藏功能

2026-03-28 14:38:50VUE

实现收藏功能的基本思路

在Vue中实现收藏功能通常涉及前端交互与后端数据存储的结合。前端负责用户点击行为的响应和UI状态切换，后端负责数据的持久化。以下是具体实现方法。

前端交互实现

使用Vue的响应式特性管理收藏状态。通过v-model或v-on绑定点击事件，动态切换收藏图标样式。

vue 实现收藏功能

<template>
  <button @click="toggleFavorite">
    <i :class="['icon', isFavorited ? 'fas fa-star' : 'far fa-star']"></i>
  </button>
</template>

<script>
export default {
  data() {
    return {
      isFavorited: false
    };
  },
  methods: {
    toggleFavorite() {
      this.isFavorited = !this.isFavorited;
      // 调用API更新后端状态
    }
  }
};
</script>

后端API调用

通过Axios或Fetch与后端交互，发送收藏状态。通常需要传递用户ID和收藏项ID。

methods: {
  async toggleFavorite() {
    this.isFavorited = !this.isFavorited;
    try {
      const response = await axios.post('/api/favorite', {
        userId: 123,
        itemId: 456,
        isFavorited: this.isFavorited
      });
      console.log(response.data);
    } catch (error) {
      console.error(error);
    }
  }
}

状态持久化

使用Vuex或Pinia管理全局收藏状态，避免页面刷新后丢失。结合本地存储（localStorage）实现离线缓存。

vue 实现收藏功能

// Vuex示例
const store = new Vuex.Store({
  state: {
    favorites: []
  },
  mutations: {
    ADD_FAVORITE(state, item) {
      state.favorites.push(item);
    },
    REMOVE_FAVORITE(state, itemId) {
      state.favorites = state.favorites.filter(item => item.id !== itemId);
    }
  }
});

性能优化

对于频繁操作的收藏按钮，添加防抖（debounce）函数避免短时间内重复请求。

import { debounce } from 'lodash';

methods: {
  toggleFavorite: debounce(function() {
    // API调用逻辑
  }, 300)
}

完整组件示例

整合上述代码的完整单文件组件示例：

<template>
  <button @click="toggleFavorite" :disabled="isLoading">
    <i :class="['icon', isFavorited ? 'fas fa-star' : 'far fa-star']"></i>
    {{ isFavorited ? '已收藏' : '收藏' }}
  </button>
</template>

<script>
import axios from 'axios';

export default {
  props: ['itemId'],
  data() {
    return {
      isFavorited: false,
      isLoading: false
    };
  },
  methods: {
    async toggleFavorite() {
      this.isLoading = true;
      this.isFavorited = !this.isFavorited;

      try {
        await axios.post('/api/favorite', {
          itemId: this.itemId,
          status: this.isFavorited
        });
      } catch (error) {
        this.isFavorited = !this.isFavorited; // 回滚状态
        alert('操作失败');
      } finally {
        this.isLoading = false;
      }
    }
  }
};
</script>