🦄 refactor(我的留言): 尝试剥离滚动列表功能，实用性不高

+export interface commentListType {
+  id: string;
+  avatar: string;
+  name: string;
+  kg_name: string;
+  comment_time: string;
+  note: string;
+  c_action: string;
+  c_name: string;
+  cover: string;
+  prod_id: string;
+  perf_id: string;
+  book_id: string;
+  perf_name: string;
+  book_name: string;
+  localism_type: string;
+  is_new: number;
+}

 /*
  * @Date: 2022-06-12 22:51:21
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-12 23:00:04
+ * @LastEditTime: 2022-06-13 01:01:33
  * @FilePath: /tswj/src/composables/useMessageList.ts
- * @Description: 文件描述
+ * @Description: 测试处理列表查询功能中的重复代码问题
+ * 感觉复用意义不大，这么写反而很麻烦
  */
-import { ref } from 'vue'
+import { Ref, ref } from 'vue'
 import { myCommentAPI } from '@/api/C/me'
 import _ from 'lodash'
+import { commentListType } from '@/@types/message/interface';
+import {
+  loading,
+  finished,
+  limit,
+  offset,
+  finishedTextStatus,
+  emptyStatus,
+} from '@/composables/variable';
 
-export const useMessageList = () => {
-  // 我的留言接口联调
-  interface commentListType {
-    id: string;
-    avatar: string;
-    name: string;
-    kg_name: string;
-    comment_time: string;
-    note: string;
-    c_action: string;
-    c_name: string;
-    cover: string;
-    prod_id: string;
-    perf_id: string;
-    book_id: string;
-    perf_name: string;
-    book_name: string;
-    localism_type: string;
-    is_new: number;
-  }
-  const commentList = ref<commentListType[]>([])
-  const loading = ref(false);
-  const finished = ref(false);
-  const limit = ref(10);
-  const offset = ref(0)
-  const finishedTextStatus = ref(false);
-  const emptyStatus = ref(false);
-  const onLoad = async () => {
-    const { data } = await myCommentAPI({ limit: limit.value, offset: offset.value });
-    data.forEach((item: { target_name: string | null | undefined; c_action: string; c_name: string; }) => {
-      let arr = _.split(item.target_name, '@'); // 分割评论的动作和姓名
-      item.c_action = arr[0]; // 评论动作
-      item.c_name = arr[1]; // 评论姓名
-    });
+// scrollList的类型是个麻烦，其他地方调用时类型不一定一样
+function fn(data: [], scrollList: Ref<commentListType[]>) {
+// function fn(data: [], scrollList: any) {
   // 数据全部加载完成
   if (!data.length) {
     // 加载状态结束
     finished.value = true;
   }
-    commentList.value = [...commentList.value, ...data];
-    offset.value = commentList.value.length;
+  scrollList.value = [...scrollList.value, ...data];
+  offset.value = scrollList.value.length;
   loading.value = false;
   // 隐藏loading标识，空列表图标
-    if (!commentList.value.length) {
+  if (!scrollList.value.length) {
     finishedTextStatus.value = false;
     emptyStatus.value = true;
   } else {
     emptyStatus.value = false;
   }
-  }
+
   return {
-    onLoad,
-    commentList,
+    scrollList,
+    finished,
     loading,
+    finishedTextStatus,
+    emptyStatus,
+  };
+}
+
+export const useMessageList = () => {
+  // 我的留言接口联调
+  const scrollList = ref<commentListType[]>([]);
+  let obj = {
+    scrollList,
     finished,
+    loading,
     finishedTextStatus,
     emptyStatus,
   };
+
+  const onLoad = async () => {
+    const { data } = await myCommentAPI({ limit: limit.value, offset: offset.value });
+    data.forEach((item: { target_name: string | null | undefined; c_action: string; c_name: string; }) => {
+      let arr = _.split(item.target_name, '@'); // 分割评论的动作和姓名
+      item.c_action = arr[0]; // 评论动作
+      item.c_name = arr[1]; // 评论姓名
+    });
+    // fn把重复代码抽离
+    obj = fn(data, scrollList);
+  }
+
+  return {
+    onLoad,
+    scrollList: obj.scrollList,
+    loading: obj.loading,
+    finished: obj.finished,
+    finishedTextStatus: obj.finishedTextStatus,
+    emptyStatus: obj.emptyStatus,
+  };
 }

+/*
+ * @Date: 2022-06-12 23:54:24
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-06-13 00:50:29
+ * @FilePath: /tswj/src/composables/variable.js
+ * @Description: 文件描述
+ */
+import { ref } from 'vue';
+
+export const loading = ref(false);
+export const finished = ref(false);
+export const limit = ref(5);
+export const offset = ref(0)
+export const finishedTextStatus = ref(false);
+export const emptyStatus = ref(false);

@@ -62,8 +62,9 @@ import goToVideoDetail from '@/router/methods/videoDetail'
 import { delCommentAPI } from '@/api/C/me'
 import { myCommentTimeAPI } from '@/api/C/perf'
 import { useMessageList } from '@/composables';
+// import { commentListType } from '@/@types/message/interface';
 
-const { onLoad, commentList, loading, finished, finishedTextStatus, emptyStatus, } = useMessageList();
+const { onLoad, scrollList:commentList, loading, finished, finishedTextStatus, emptyStatus, } = useMessageList();
 
 onBeforeRouteLeave(async () => {
   // 更新留言阅读情况