V01 Vue.js 实战教程 - 基础篇7.2. 添加点赞功能
简介
本小节中，我们将一起添加一个针对文章的点赞功能，并使用 animate.css 添加点赞动画。
添加点赞事件
打开 src/store/actions.js 文件，在代码的最后面，导出点赞事件 like：
src/store/actions.js
.
.
.
// 参数 articleId 是文章 ID；isAdd 为 true 时点赞，为 false 时取消赞
export const like = ({ commit, state }, { articleId, isAdd }) => {
// 仓库的文章
let articles = state.articles
// 点赞用户列表
let likeUsers = []
// 用户 ID，默认为 1
const uid = 1
if (!Array.isArray(articles)) articles = []
for (let article of articles) {
// 找到对应文章时
if (parseInt(article.articleId) === parseInt(articleId)) {
// 更新点赞用户列表
likeUsers = Array.isArray(article.likeUsers) ? article.likeUsers : likeUsers
if (isAdd) {
// 是否已赞
const isAdded = likeUsers.some(likeUser => parseInt(likeUser.uid) === uid)
if (!isAdded) {...
关于 LearnKu
粤公网安备 44030502004330号