点赞功能流程+实现

点赞流程：

• 首先用户必须是登录的状态
• 获取到vuex或者localStorage中的用户信息
• 给元素添加点击事件，并把点击的这item项当做实参传递给事件
• 定义事件，并且接收这个形参
• 请求后端接口，把形参的id传给后端
• 如果响应成功的话，判断当前已选择里面是否包含当前的用户，如果有的话，就是取消点赞，反之点赞
• 最后不论点赞成功和取消点赞都要进行提

最后上代码：

<template>
  <view>
    <view @click="clickLike(item)" v-for="(item, index) in list" :key="index">
      <text>♡</text>
      <text>{{ item.isLike ? item.isLike.userName || item.isLike.nickName : '' }}</text>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  ...mapState('m_user', ['user']),
  data() {
    return {
      // 这里是响应出来的商品数据或者内容数据，每一条数据里面肯定都包含一个id
      list: [
        {
          id: 1,
          isLike: [] // 这里返回的是已点赞人员，有可能只返回枚举值
        },
        {
          id: 2,
          isLike: [] // 这里返回的是已点赞人员，有可能只返回枚举值
        }
      ]
    }
  },
  methods: {
    async clickLike(item) {
      const res = await $api.post('你的接口地址', { id: item.id })
      if(res.data.code !== 200) return this.$showMsg()
      // 在每一个已点赞数组中找这个人员，如果找到了说明它点过赞了，当前点击就是取消点赞了，反之点赞
      let find = item.isLike.findIndex(findItem => findItem.id === this.user.id);
      if (find !== -1) {
        item.isLike.splice(find, 1);
      } else {
        item.isLike.push({
          id: this.user.id,
          name: this.user.userName || this.user.nickName
        })
      }
      uni.showToast({
        title: find !== -1 ? '取消点赞成功' : '点赞成功',
        icon: 'none',
        mask: true
      })
    }
  }
}
</script>