讨论

src/api/request.js

@@ -1,28 +1,64 @@
 import router from "@/router";
-import {ref, watch} from "vue";
+import {reactive, ref, toRefs, watch} from "vue";
 import axios from 'axios';
 
+export function usePage(_url, param) {
+
+    const state = reactive({
+        data: {},
+        loading: false,
+        total: 0,
+        size: 10,
+        current: 1,
+        params: {pageNo: 1, pageSize: 10, ...param}
+    })
+
+    watch(param, () => {
+        state.params = {...state.params, ...param}
+        fetchData()
+    })
+
+    function fetchData() {
+        state.loading = true
+        request(_url, state.params).then(r => {
+            state.params.pageNo === 1 ? (state.data = r.data.records) : (state.data = [...state.data, ...r.data.records])
+            state.size = r.data.size
+            state.total = r.data.total
+            state.current = r.data.current
+            state.loading = false
+        })
+    }
+
+    fetchData()
+    return {
+        ...toRefs(state),
+        fetchData,
+    };
+}
+
 export function useRequest(_url, params = {}) {
 
-    const data = ref({})
-    const loading = ref(false)
+    const state = reactive({
+        data: {},
+        loading: false,
+
+    })
 
     watch(params, () => {
         fetchData()
     })
 
     function fetchData() {
-        loading.value = true
+        state.loading = true
         request(_url, params).then(r => {
-            data.value = r.data
-            loading.value = false
+            state.data = r.data
+            state.loading = false
         })
     }
 
     fetchData()
     return {
-        data,
-        loading,
+        ...toRefs(state),
         fetchData,
     };
 }