uniapp-文章收藏功能实现

<template>
  <view class="save-incons" @click.stop="_changeSaveStatus">
    <uni-icons color="#ff6600" :type="isLike ? heart-filled:heart" size="20"></uni-icons>
  </view>
</template>

在功能实现之前我们需要验证是否为登录的状态 如未登录则跳转登录页面 像是检验登录的功能一般会多次用到 直接Mixin混入全局使用

checkedIsLogin () {
          
   
          return new Promise(resolve => {
          
   
            if (this.userInfo) {
          
   
              resolve()
            } else {
          
   
              uni.navigateTo({
          
   
                url: /pages/userInfo/login/login
              })
            }
          })
        },

我们在数据操作完成之后记得更新之前存储的用户信息保证数据是实时更新的 同事重新获取新的数据 覆盖之前的数据

this.updateUserInfo({
          
    ...this.userInfo, ...newUserInfo })

整体流程如下 添加上点击之后提示框

methods: {
          
   
    async _changeSaveStatus () {
          
   
      // TODOS 判断用户是否登录
      await this.checkedIsLogin();
      const {
          
    msg, newUserInfo } = await this.$http.update_save_like({
          
   
        articleId: this.item._id,
        userId: this.userInfo._id
      })
      uni.showToast({
          
   
        title: msg,
        icon: none
      })
      this.updateUserInfo({
          
    ...this.userInfo, ...newUserInfo })
    },
  },

此时我们拿到文章id 和用户id 传入后端进行数据操作

同时动态设置我们的红心状态 自动变化

computed: {
          
   
    isLike () {
          
   
      return this.userInfo && this.userInfo.article_likes_ids.includes(this.item._id)
    }
  }

写的有些草率 具体可私聊发源码