feat: 用组合式api重构评论功能

Author: biao.chen

src/components/ArrowUp.vue

@@ -9,35 +9,39 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, reactive, onMounted } from "vue";
 
 export default defineComponent({
   name: "ArrowUp",
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       isShowBtn: false,
-    };
-  },
-  mounted() {
-    // 当网页向下滑动 20px 出现"返回顶部" 按钮
-    window.onscroll = (): void => {
-      if (
-        window.document.body.scrollTop > 100 ||
-        window.document.documentElement.scrollTop > 100
-      ) {
-        this.isShowBtn = true;
-      } else {
-        this.isShowBtn = false;
-      }
-    };
-  },
-  methods: {
-    topFunction(): void {
+    });
+
+    onMounted(() => {
+      // 当网页向下滑动 20px 出现"返回顶部" 按钮
+      window.onscroll = (): void => {
+        if (
+          window.document.body.scrollTop > 100 ||
+          window.document.documentElement.scrollTop > 100
+        ) {
+          state.isShowBtn = true;
+        } else {
+          state.isShowBtn = false;
+        }
+      };
+    });
+
+    const topFunction = (): void => {
       document.body.scrollTop = 0;
       document.documentElement.scrollTop = 0;
-    },
+    }
+
+    return {
+      state,
+      topFunction
+    };
   },
-  setup() {},
 });
 </script>
 <style scoped>

src/components/Comment.vue

@@ -2,14 +2,14 @@
   <el-dialog
     title="评论"
     width="60%"
-    v-model="dialogDodel"
+    v-model="state.dialogDodel"
     @close="cancel"
   >
     <el-form>
       <el-form-item>
         <el-input
           type="textarea"
-          v-model="content"
+          v-model="state.content"
           placeholder="文明社会，理性评论"
           autocomplete="off"
         ></el-input>
@@ -32,9 +32,10 @@
 </template>
 
 <script lang="ts">
-import config from "../utils/config";
-import { ToUser } from "../types/index";
-import { defineComponent } from "vue";
+import { ElMessage } from "element-plus";
+import { defineComponent, reactive, watch } from "vue";
+import service from "../utils/https";
+import urls from "../utils/urls";
 
 export default defineComponent({
   name: "Comment",
@@ -57,53 +58,31 @@ export default defineComponent({
     },
   },
   emits: ["ok", "cancel"],
-  data() {
-    return {
-      dialogDodel: this.visible,
+  setup(props, context) {
+    const state = reactive({
+      dialogDodel: props.visible,
       btnLoading: false,
       content: "",
       cacheTime: 0, // 缓存时间
       times: 0, // 留言次数
-    };
-  },
-  watch: {
-    dialogDodel: {
-      handler(val: any, oldVal: any) {
-        if (!val) {
-          this.$emit("cancel", val);
-        }
-      },
-      // immediate: true
-    },
-    visible: {
-      handler(val: any, oldVal: any) {
-        console.log("val: ", val);
-        this.dialogDodel = val;
-      },
-      // immediate: true
-    },
-  },
-  // computed: {
-  //   dialogVisible(): boolean {
-  //     return this.visible;
-  //   },
-  // },
-  methods: {
-    cancel(): boolean {
-      this.$emit("cancel", false);
+    });
+
+    const cancel = (): boolean => {
+      context.emit("cancel", false);
       return false;
-    },
-    async handleOk(): Promise<void> {
-      if (!this.article_id) {
-        (this as any).$message({
+    };
+
+    const handleOk = async (): Promise<void> => {
+      if (!props.article_id) {
+        ElMessage({
           message: "该文章不存在！",
           type: "error",
         });
         return;
       }
 
-      if (this.times > 2) {
-        (this as any).$message({
+      if (state.times > 2) {
+        ElMessage({
           message: "您今天评论的次数已经用完，明天再来评论吧！",
           type: "warning",
         });
@@ -112,16 +91,16 @@ export default defineComponent({
 
       let now = new Date();
       let nowTime = now.getTime();
-      if (nowTime - this.cacheTime < 4000) {
-        (this as any).$message({
+      if (nowTime - state.cacheTime < 4000) {
+        ElMessage({
           message: "您评论太过频繁，1 分钟后再来评论吧！",
           type: "warning",
         });
         return;
       }
 
-      if (!this.content) {
-        (this as any).$message({
+      if (!state.content) {
+        ElMessage({
           message: "评论内容不能为空",
           type: "error",
         });
@@ -133,33 +112,42 @@ export default defineComponent({
         let userInfo = JSON.parse(window.sessionStorage.userInfo);
         user_id = userInfo._id;
       } else {
-        (this as any).$message({
+        ElMessage({
           message: "登录才能评论，请先登录！",
           type: "warning",
         });
         return;
       }
-      this.btnLoading = true;
-      await (this as any).$https.post((this as any).$urls.addThirdComment, {
-        article_id: this.article_id,
+      state.btnLoading = true;
+      await service.post(urls.addThirdComment, {
+        article_id: props.article_id,
         user_id,
-        comment_id: this.comment_id,
-        to_user: JSON.stringify(this.to_user),
-        content: this.content,
+        comment_id: props.comment_id,
+        to_user: JSON.stringify(props.to_user),
+        content: state.content,
       });
-      this.btnLoading = false;
-      this.times++;
+      state.btnLoading = false;
+      state.times++;
 
-      this.cacheTime = nowTime;
-      this.content = "";
-      this.$emit("ok", false);
-      (this as any).$message({
+      state.cacheTime = nowTime;
+      state.content = "";
+      context.emit("ok", false);
+      ElMessage({
         message: "操作成功",
         type: "success",
       });
-    },
+    };
+
+    watch(props, (val, oldVal) => {
+      state.dialogDodel = val.visible;
+    });
+
+    return {
+      state,
+      cancel,
+      handleOk
+    };
   },
-  setup() {},
 });
 </script>
 <style scoped>

src/components/CommentList.vue

@@ -88,17 +88,22 @@
       </div>
     </div>
     <Comment
-      :visible="visible"
-      :to_user="to_user"
-      :comment_id="comment_id"
+      :visible="state.visible"
+      :to_user="state.to_user"
+      :comment_id="state.comment_id"
       :article_id="article_id"
       @ok="handleOk"
       @cancel="handleCancel"
     />
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, defineAsyncComponent } from "vue";
+import { ElMessage } from "element-plus";
+import {
+  defineComponent,
+  defineAsyncComponent,
+  reactive,
+} from "vue";
 import { timestampToTime } from "../utils/utils";
 import { ToUser } from "../types/index";
 
@@ -121,57 +126,65 @@ export default defineComponent({
       default: "",
     },
   },
-  data() {
-    return {
+  setup(props, context) {
+    const state = reactive({
       visible: false,
       comment_id: "",
       to_user: {
         user_id: "",
         name: "",
         avatar: "",
         type: 0,
-      } as ToUser,
-    };
-  },
-  methods: {
-    formatTime(value: string | Date): string {
+      }
+    });
+
+    const formatTime = (value: string | Date): string => {
       return timestampToTime(value, true);
-    },
-    handleCancel(): void {
-      this.visible = false;
-    },
-    handleOk(): void {
-      this.visible = false;
-      this.$emit("refreshArticle");
-    },
+    };
+
+    const handleCancel = (): void => {
+      state.visible = false;
+    };
+
+    const handleOk = (): void => {
+      state.visible = false;
+      context.emit("refreshArticle");
+    };
+
     // 添加评论
-    showCommentModal(
+    const showCommentModal = (
       commitId: string,
       user: ToUser,
       secondUser?: ToUser
-    ): boolean | void {
+    ): boolean | void => {
       if (!window.sessionStorage.userInfo) {
-        (this as any).$message({
+        ElMessage({
           message: "登录才能点赞，请先登录！",
           type: "warning",
         });
         return false;
       }
       // 添加三级评论
       if (secondUser) {
-        this.visible = true;
-        this.comment_id = commitId;
-        this.to_user = user;
+        state.visible = true;
+        state.comment_id = commitId;
+        state.to_user = user;
       } else {
         // 添加二级评论
-        this.visible = true;
-        this.comment_id = commitId;
-        this.to_user = user;
+        state.visible = true;
+        state.comment_id = commitId;
+        state.to_user = user;
       }
-      console.log("this.visible: ", this.visible);
-    },
+    };
+
+    return {
+      state,
+      showCommentModal,
+      handleOk,
+      handleCancel,
+      formatTime
+    };
   },
-  setup() {},
 });
 </script>
 <style lang="less" scoped>

src/components/RegisterAndLogin.vue

@@ -1,7 +1,7 @@
 <template>
   <el-dialog
     title="登录"
-    :width="state.isMobile ? '90%' : '50%'"
+    :width="isMobile ? '90%' : '50%'"
     v-model="state.dialogDodel"
     @close="cancel"
     :show-close="true"