收藏按钮组件实现

一、前端处理

1. 收藏图标点击事件内获取用户信息，及文章信息，传递到后端

   由于多个界面中都会用到userInfo对象，可将userInfo对象放在一个全局的mixin中进行封存，保证每个界面或组件内部都可以进行使用

   1. 定义commonMixin文件

      import { mapState } from 'vuex'
      
      export default {
        install (Vue) {
          Vue.mixin({
            computed: {
              ...mapState(['userInfo'])
            }
          })
        }
      }
      

   2. main.js文件中对common Mixing文件进行使用

      // main.js
      import commonMixin from './common/commonMixin.js'
      Vue.use(commonMixin)
      

2. 将用户ID及文件ID作为参数传递给云函数

   1. 创建全局检测用户是否登录函数，供多个组件进行使用，commonMixin中完成

      // commonMixin文件
      checkedIsLogin () {
                return new Promise(resolve => {
                  if (this.userInfo) {
                    resolve()
                  } else {
                    uni.navigateTo({
                      url: '/pages/userInfo/login/login'
                    })
                  }
                })
              }
      // saveLike组件
      await this.checkedIsLogin();
      

   2. 将文章信息传递到saveLike组件内部使用

      //listCard 组件
      <SaveLikes :item="item"></SaveLikes>
      // saveLike组件
       props: {
          item: Object
        }
      

   3. 发送数据到云服务器

       const res = await this.$http.upate_save_like({
              articleId: this.item._id,
              userId: this.userInfo._id
            })
      

二、云函数定义

1. 获取用户记录值

2. 找到指定字段article_likes_ids

3. 通过db.command 更新指令修改article_likes_ids

   参考地址：https://uniapp.dcloud.io/uniCloud/cf-database?id=query-command

   • 当文章id存在，进行删除操作，使用pull方法 参考地址：https://uniapp.dcloud.io/uniCloud/cf-database?id=pull
   • 当文章id不存在，进行添加操作，使用addToSet方法 参考地址:https://uniapp.dcloud.io/uniCloud/cf-database?id=addtoset

4. 处理完成，将article_likes_ids进行修改之后，重新存储

   'use strict';
   // 定义数据库引用
   const db = uniCloud.database();
   // 定义修改指令
   const dbCmd = db.command
   
   exports.main = async (event, context) => {
   	const {
   		userId,
   		articleId
   	} = event
   	// 获取用户Ids集合
   	const userInfo = await db.collection('user').doc(userId).get();
   
   	const articleIds = userInfo.data[0].article_likes_ids
   	let returnMsg = null
   
   	let articleArr = null;
   	// 如果包含删除收藏
   	if (articleIds.includes(articleId)) {
   		articleArr = dbCmd.pull(articleId)
   		returnMsg = '取消收藏成功'
   	} else {
   		articleArr = dbCmd.addToSet(articleId)
   		returnMsg = '添加收藏成功'
   	}
   
   	await db.collection('user').doc(userId).update({
   		article_likes_ids: articleArr
   	})
   
   	const updateUserInfo = await db.collection('user').doc(userId).get()
   
   	//返回数据给客户端
   	return {
   		code: 0,
   		data: {
   			msg: returnMsg,
   			newUserInfo:updateUserInfo.data[0]
   		}
   	}
   };
   
   

获取数据后前端处理

1. 修改存储的用户信息article_likes_ids数组

   // saveLikes组件处理
   this.updateUserInfo({ ...this.userInfo, ...newUserInfo })
   

2. 弹出提示信息

3. 重新对保存状态icon图标赋值

   使用计算属性处理用户收藏保存状态

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