7.4. 添加评论功能
简介
本小节中,我们将一起添加一个针对文章的评论功能,并在发布评论时添加一个过渡效果。
添加评论事件
打开 src/store/actions.js
文件,在代码的最后面,导出评论事件 comment
:
src/store/actions.js
.
.
.
// 参数 articleId 是文章 ID;comment 是评论内容;commentId 是评论 ID
export const comment = ({ commit, state }, { articleId, comment, commentId }) => {
// 仓库的文章
let articles = state.articles
// 评论列表
let comments = []
if (!Array.isArray(articles)) articles = []
for (let article of articles) {
// 找到对应文章时
if (parseInt(article.articleId) === parseInt(articleId)) {
// 更新评论列表
comments = Array.isArray(article.comments) ? article.comments : comments
if (comment) {
// 获取用户传入的评论内容,设置用户 ID 的默认值为 1
const { uid = 1, content } = comment
const date = new Date()
if (commentId === undefin...