feat:自动填充评论信息，删除vuex多余代码

blog-view/src/components/comment/Comment.vue

@@ -13,7 +13,7 @@
 				<a class="nickname" :href="comment.website!=''&&comment.website!=null?comment.website:null" target="_blank" rel="external nofollow noopener">{{ comment.nickname }}</a>
 				<div class="ui black left pointing label" v-if="comment.adminComment">{{ $store.state.siteInfo.commentAdminFlag }}</div>
 				<div class="metadata">
-					<strong class="date">{{ comment.createTime | dateFormat('YYYY-MM-DD HH:mm')}}</strong>
+					<strong class="date">{{ comment.createTime | dateFormat('YYYY-MM-DD HH:mm') }}</strong>
 				</div>
 				<el-button size="mini" type="primary" @click="setReply(comment.id)">回复</el-button>
 				<div class="text">{{ comment.content }}</div>
@@ -28,7 +28,7 @@
 						<a class="nickname" :href="reply.website!=''&&reply.website!=null?reply.website:null" target="_blank" rel="external nofollow noopener">{{ reply.nickname }}</a>
 						<div class="ui black left pointing label" v-if="reply.adminComment">{{ $store.state.siteInfo.commentAdminFlag }}</div>
 						<div class="metadata">
-							<strong class="date">{{ reply.createTime | dateFormat('YYYY-MM-DD HH:mm')}}</strong>
+							<strong class="date">{{ reply.createTime | dateFormat('YYYY-MM-DD HH:mm') }}</strong>
 						</div>
 						<div class="text"><a :href="`#comment-${reply.parentCommentId}`">@{{ reply.parentCommentNickname }}</a>{{ reply.content }}</div>
 						<div class="actions">
@@ -46,6 +46,7 @@
 <script>
 	import {mapState} from 'vuex'
 	import CommentForm from "./CommentForm";
+	import {SET_PARENT_COMMENT_ID} from "@/store/mutations-types";
 
 	export default {
 		name: "Comment",
@@ -55,7 +56,7 @@
 		},
 		methods: {
 			setReply(id) {
-				this.$store.dispatch('setParentCommentId', id)
+				this.$store.commit(SET_PARENT_COMMENT_ID, id)
 			}
 		}
 	}

blog-view/src/components/comment/CommentForm.vue

@@ -3,7 +3,7 @@
 	<div class="form">
 		<h3>
 			发表评论
-			<el-button class="m-small" size="mini" type="primary" @click="$store.dispatch('setParentCommentId', -1)" v-show="parentCommentId!==-1">取消回复</el-button>
+			<el-button class="m-small" size="mini" type="primary" @click="$store.commit(SET_PARENT_COMMENT_ID, -1)" v-show="parentCommentId!==-1">取消回复</el-button>
 		</h3>
 		<el-form :inline="true" :model="commentForm" :rules="formRules" ref="formRef" size="small">
 			<el-input :class="'textarea'" type="textarea" :rows="5" v-model="commentForm.content" placeholder="评论千万条，友善第一条"
@@ -18,7 +18,7 @@
 			</el-form-item>
 			<el-form-item prop="email">
 				<el-popover ref="emailPopover" placement="bottom" trigger="focus"
-				            content="邮箱将保密，用于接收回复邮件，可随时退订">
+				            content="用于接收回复邮件">
 				</el-popover>
 				<el-input v-model="commentForm.email" placeholder="邮箱（必填）" :validate-event="false" v-popover:emailPopover>
 					<i slot="prefix" class="el-input__icon el-icon-message"></i>
@@ -28,7 +28,7 @@
 				<el-popover ref="websitePopover" placement="bottom" trigger="focus"
 				            content="可以让我参观一下吗😊">
 				</el-popover>
-				<el-input v-model="commentForm.website" placeholder="网站或博客（可选）" v-popover:websitePopover>
+				<el-input v-model="commentForm.website" placeholder="https://（可选）" v-popover:websitePopover>
 					<i slot="prefix" class="el-input__icon el-icon-map-location"></i>
 				</el-input>
 			</el-form-item>
@@ -45,6 +45,7 @@
 <script>
 	import {mapState} from 'vuex'
 	import {checkEmail} from "@/common/reg";
+	import {SET_PARENT_COMMENT_ID} from "@/store/mutations-types";
 
 	export default {
 		name: "CommentForm",
@@ -53,6 +54,7 @@
 		},
 		data() {
 			return {
+				SET_PARENT_COMMENT_ID,
 				formRules: {
 					nickname: [
 						{required: true, message: '请输入评论昵称'},

blog-view/src/components/comment/CommentList.vue

@@ -8,6 +8,7 @@
 <script>
 	import Comment from "./Comment";
 	import Pagination from "./Pagination";
+	import {SET_COMMENT_QUERY_PAGE, SET_COMMENT_QUERY_BLOG_ID, SET_COMMENT_QUERY_PAGE_NUM} from "@/store/mutations-types";
 
 	export default {
 		name: "CommentList",
@@ -33,9 +34,9 @@
 		},
 		methods: {
 			init() {
-				this.$store.dispatch('setCommentQueryPage', this.page)
-				this.$store.dispatch('setCommentQueryBlogId', this.blogId)
-				this.$store.dispatch('setCommentQueryPageNum', 1)
+				this.$store.commit(SET_COMMENT_QUERY_PAGE, this.page)
+				this.$store.commit(SET_COMMENT_QUERY_BLOG_ID, this.blogId)
+				this.$store.commit(SET_COMMENT_QUERY_PAGE_NUM, 1)
 				this.$store.dispatch('getCommentList')
 			}
 		}

blog-view/src/components/comment/Pagination.vue

@@ -7,6 +7,7 @@
 
 <script>
 	import {mapState} from 'vuex'
+	import {SET_COMMENT_QUERY_PAGE_NUM, SET_PARENT_COMMENT_ID} from "@/store/mutations-types";
 
 	export default {
 		name: "Pagination",
@@ -16,8 +17,8 @@
 		methods: {
 			//监听页码改变的事件
 			handleCurrentChange(newPage) {
-				this.$store.dispatch('setCommentQueryPageNum', newPage)
-				this.$store.dispatch('setParentCommentId', -1)
+				this.$store.commit(SET_COMMENT_QUERY_PAGE_NUM, newPage)
+				this.$store.commit(SET_PARENT_COMMENT_ID, -1)
 				this.$store.dispatch('getCommentList')
 			},
 		}

blog-view/src/store/actions.js

@@ -1,13 +1,7 @@
 import {
-	SAVE_SITE_INFO,
-	SAVE_INTRODUCTION,
 	SAVE_COMMENT_RESULT,
-	SET_COMMENT_QUERY_PAGE_NUM,
 	SET_PARENT_COMMENT_ID,
-	SET_COMMENT_FORM_EMPTY,
-	SET_COMMENT_QUERY_PAGE,
-	SET_COMMENT_QUERY_BLOG_ID,
-	SET_IS_BLOG_RENDER_COMPLETE,
+	RESET_COMMENT_FORM,
 	SET_BLOG_PASSWORD_DIALOG_VISIBLE,
 	SET_BLOG_PASSWORD_FORM
 } from "./mutations-types";
@@ -17,12 +11,6 @@ import {Message, Notification} from "element-ui";
 import router from "../router";
 
 export default {
-	saveSiteInfo({commit}, siteInfo) {
-		commit(SAVE_SITE_INFO, {siteInfo})
-	},
-	saveIntroduction({commit}, introduction) {
-		commit(SAVE_INTRODUCTION, {introduction})
-	},
 	getCommentList({commit, rootState}) {
 		//密码保护的文章，需要发送密码验证通过后保存在localStorage的Token
 		const blogToken = window.localStorage.getItem(`blog${rootState.commentQuery.blogId}`)
@@ -37,22 +25,7 @@ export default {
 			Message.error("请求失败")
 		})
 	},
-	setCommentQueryPage({commit}, page) {
-		commit(SET_COMMENT_QUERY_PAGE, {page})
-	},
-	setCommentQueryBlogId({commit}, blogId) {
-		commit(SET_COMMENT_QUERY_BLOG_ID, {blogId})
-	},
-	setCommentQueryPageNum({commit}, pageNum) {
-		commit(SET_COMMENT_QUERY_PAGE_NUM, {pageNum})
-	},
-	setParentCommentId({commit}, parentCommentId) {
-		commit(SET_PARENT_COMMENT_ID, {parentCommentId})
-	},
-	setCommentFormEmpty({commit}) {
-		commit(SET_COMMENT_FORM_EMPTY)
-	},
-	submitCommentForm({rootState, dispatch}, token) {
+	submitCommentForm({rootState, dispatch, commit}, token) {
 		let form = {...rootState.commentForm}
 		form.page = rootState.commentQuery.page
 		form.blogId = rootState.commentQuery.blogId
@@ -63,8 +36,8 @@ export default {
 					title: res.msg,
 					type: 'success'
 				})
-				dispatch('setParentCommentId', -1)
-				dispatch('setCommentFormEmpty')
+				commit(SET_PARENT_COMMENT_ID, -1)
+				commit(RESET_COMMENT_FORM)
 				dispatch('getCommentList')
 			} else {
 				Notification({
@@ -81,9 +54,6 @@ export default {
 			})
 		})
 	},
-	setIsBlogRenderComplete({commit}, ok) {
-		commit(SET_IS_BLOG_RENDER_COMPLETE, {ok})
-	},
 	goBlogPage({commit}, blog) {
 		if (blog.privacy) {
 			const adminToken = window.sessionStorage.getItem('adminToken')

blog-view/src/store/mutations-types.js

@@ -5,7 +5,8 @@ export const SET_COMMENT_QUERY_PAGE = 'setCommentQueryPage'
 export const SET_COMMENT_QUERY_BLOG_ID = 'setCommentQueryBlogId'
 export const SET_COMMENT_QUERY_PAGE_NUM = 'setCommentQueryPageNum'
 export const SET_PARENT_COMMENT_ID = 'setParentCommentId'
-export const SET_COMMENT_FORM_EMPTY = 'setCommentFormEmpty'
+export const RESET_COMMENT_FORM = 'resetCommentForm'
+export const RESTORE_COMMENT_FORM = 'restoreCommentForm'
 export const SET_IS_BLOG_RENDER_COMPLETE = 'setIsBlogRenderComplete'
 export const SET_BLOG_PASSWORD_DIALOG_VISIBLE = 'setBlogPasswordDialogVisible'
 export const SET_BLOG_PASSWORD_FORM = 'setBlogPasswordForm'

blog-view/src/store/mutations.js

@@ -4,7 +4,8 @@ import {
 	SAVE_COMMENT_RESULT,
 	SET_COMMENT_QUERY_PAGE_NUM,
 	SET_PARENT_COMMENT_ID,
-	SET_COMMENT_FORM_EMPTY,
+	RESET_COMMENT_FORM,
+	RESTORE_COMMENT_FORM,
 	SET_COMMENT_QUERY_PAGE,
 	SET_COMMENT_QUERY_BLOG_ID,
 	SET_IS_BLOG_RENDER_COMPLETE,
@@ -16,39 +17,49 @@ import {
 } from "./mutations-types";
 
 export default {
-	[SAVE_SITE_INFO](state, {siteInfo}) {
+	[SAVE_SITE_INFO](state, siteInfo) {
 		state.siteInfo = siteInfo
 	},
-	[SAVE_INTRODUCTION](state, {introduction}) {
+	[SAVE_INTRODUCTION](state, introduction) {
 		state.introduction = introduction
 	},
 	[SAVE_COMMENT_RESULT](state, data) {
 		state.commentCount = data.count
 		state.commentTotalPage = data.comments.totalPage
 		state.comments = data.comments.list
 	},
-	[SET_COMMENT_QUERY_PAGE](state, {page}) {
+	[SET_COMMENT_QUERY_PAGE](state, page) {
 		state.commentQuery.page = page
 	},
-	[SET_COMMENT_QUERY_BLOG_ID](state, {blogId}) {
+	[SET_COMMENT_QUERY_BLOG_ID](state, blogId) {
 		state.commentQuery.blogId = blogId
 	},
-	[SET_COMMENT_QUERY_PAGE_NUM](state, {pageNum}) {
+	[SET_COMMENT_QUERY_PAGE_NUM](state, pageNum) {
 		state.commentQuery.pageNum = pageNum
 	},
-	[SET_PARENT_COMMENT_ID](state, {parentCommentId}) {
+	[SET_PARENT_COMMENT_ID](state, parentCommentId) {
 		state.parentCommentId = parentCommentId
 	},
-	[SET_COMMENT_FORM_EMPTY](state) {
-		state.commentForm = {
-			content: '',
-			nickname: '',
-			email: '',
-			website: '',
-			notice: true
+	[RESET_COMMENT_FORM](state) {
+		const commentForm = {
+			nickname: state.commentForm.nickname,
+			email: state.commentForm.email,
+			website: state.commentForm.website
 		}
+		//保存访客信息，下次评论时自动填充表单
+		window.localStorage.setItem('commentForm', JSON.stringify(commentForm))
+		state.commentForm.content = ''
+		state.commentForm.notice = true
 	},
-	[SET_IS_BLOG_RENDER_COMPLETE](state, {ok}) {
+	[RESTORE_COMMENT_FORM](state) {
+		const lastForm = JSON.parse(window.localStorage.getItem('commentForm'))
+		if (lastForm) {
+			state.commentForm.nickname = lastForm.nickname
+			state.commentForm.email = lastForm.email
+			state.commentForm.website = lastForm.website
+		}
+	},
+	[SET_IS_BLOG_RENDER_COMPLETE](state, ok) {
 		state.isBlogRenderComplete = ok
 	},
 	[SET_BLOG_PASSWORD_DIALOG_VISIBLE](state, visible) {

blog-view/src/store/state.js

@@ -6,6 +6,7 @@ export default {
 		rollText: [],
 	},
 	commentQuery: {
+		//用于后端判断该评论所在页面类型(文章、友链、关于我)
 		page: 0,
 		blogId: null,
 		pageNum: 1,

blog-view/src/views/Index.vue

@@ -61,7 +61,7 @@
 	import Tocbot from "@/components/sidebar/Tocbot";
 	import BlogPasswordDialog from "@/components/index/BlogPasswordDialog";
 	import {mapState} from 'vuex'
-	import {SAVE_CLIENT_SIZE} from "../store/mutations-types";
+	import {SAVE_CLIENT_SIZE, SAVE_INTRODUCTION, SAVE_SITE_INFO, RESTORE_COMMENT_FORM} from "@/store/mutations-types";
 
 	export default {
 		name: "Index",
@@ -91,6 +91,8 @@
 		created() {
 			this.getSite()
 			this.getHitokoto()
+			//从localStorage恢复之前的评论信息
+			this.$store.commit(RESTORE_COMMENT_FORM)
 		},
 		mounted() {
 			//保存可视窗口大小
@@ -109,8 +111,8 @@
 						this.categoryList = res.data.categoryList
 						this.tagList = res.data.tagList
 						this.randomBlogList = res.data.randomBlogList
-						this.$store.dispatch('saveSiteInfo', this.siteInfo)
-						this.$store.dispatch('saveIntroduction', res.data.introduction)
+						this.$store.commit(SAVE_SITE_INFO, this.siteInfo)
+						this.$store.commit(SAVE_INTRODUCTION, res.data.introduction)
 						document.title = this.$route.meta.title + this.siteInfo.webTitleSuffix
 					}
 				})

blog-view/src/views/blog/Blog.vue

@@ -88,7 +88,7 @@
 	import {getBlogById} from "@/api/blog";
 	import CommentList from "@/components/comment/CommentList";
 	import {mapState} from "vuex";
-	import {SET_FOCUS_MODE} from '../../store/mutations-types';
+	import {SET_FOCUS_MODE, SET_IS_BLOG_RENDER_COMPLETE} from '@/store/mutations-types';
 
 	export default {
 		name: "Blog",
@@ -110,7 +110,7 @@
 			next(vm => {
 				// 当 beforeRouteEnter 钩子执行前，组件实例尚未创建
 				// vm 就是当前组件的实例，可以在 next 方法中把 vm 当做 this用
-				vm.$store.dispatch('setIsBlogRenderComplete', false)
+				vm.$store.commit(SET_IS_BLOG_RENDER_COMPLETE, false)
 			})
 		},
 		beforeRouteLeave(to, from, next) {
@@ -132,7 +132,7 @@
 				//在当前组件内路由到其它博客文章时，要重新获取文章
 				this.getBlog(to.params.id)
 				//只要路由路径有改变，且停留在当前Blog组件内，就把文章的渲染完成状态置为 false
-				this.$store.dispatch('setIsBlogRenderComplete', false)
+				this.$store.commit(SET_IS_BLOG_RENDER_COMPLETE, false)
 				next()
 			}
 		},
@@ -154,7 +154,7 @@
 						this.$nextTick(() => {
 							Prism.highlightAll()
 							//将文章渲染完成状态置为 true
-							this.$store.dispatch('setIsBlogRenderComplete', true)
+							this.$store.commit(SET_IS_BLOG_RENDER_COMPLETE, true)
 						})
 					} else {
 						this.msgError(res.msg)