feat(usePagination): add reload function to reset paging info

src/__tests__/pagination.test.tsx

@@ -1,21 +1,15 @@
-import { mount, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import fetchMock from 'fetch-mock';
 import Mock from 'mockjs';
-import { defineComponent, reactive, Ref, ref, watchEffect } from 'vue';
-import {
-  clearGlobalOptions,
-  GlobalOptions,
-  setGlobalOptions,
-} from '../core/config';
+import { defineComponent } from 'vue';
+import { clearGlobalOptions } from '../core/config';
 import {
   FOCUS_LISTENER,
   RECONNECT_LISTENER,
   VISIBLE_LISTENER,
 } from '../core/utils/listener';
-import { usePagination, RequestConfig } from '../index';
-import { waitForAll, waitForTime } from './utils';
-import { failedRequest } from './utils/request';
-declare let jsdom: any;
+import { usePagination } from '../index';
+import { waitForTime } from './utils';
 
 type CustomPropertyMockDataType = {
   result: Array<{ name: string; age: number }>;
@@ -168,7 +162,7 @@ describe('usePagination', () => {
     const totalPageEl = wrapper.find('.totalPage');
 
     for (let index = 0; index < 100; index++) {
-      paramsEl.trigger('click');
+      await paramsEl.trigger('click');
       await waitForTime(1000);
       expect(paramsEl.text()).toBe(`[{"current":${_current},"pageSize":10}]`);
       expect(totalEl.text()).toBe('100');
@@ -216,7 +210,7 @@ describe('usePagination', () => {
     const totalPageEl = wrapper.find('.totalPage');
 
     for (let index = 0; index < 100; index++) {
-      paramsEl.trigger('click');
+      await paramsEl.trigger('click');
       await waitForTime(1000);
       expect(paramsEl.text()).toBe(`[{"current":1,"pageSize":${_pageSize}}]`);
       expect(totalEl.text()).toBe('100');
@@ -344,4 +338,71 @@ describe('usePagination', () => {
       expect(pageSizeEl.text()).toBe(`${_pageSize}`);
     }
   });
+
+  test('`reload` should work', async () => {
+    let _current = 1;
+    const wrapper = shallowMount(
+      defineComponent({
+        setup() {
+          const {
+            total,
+            params,
+            current,
+            pageSize,
+            totalPage,
+            reload,
+          } = usePagination<NormalMockDataType>(normalApi);
+          return () => (
+            <div>
+              <div class="params">{JSON.stringify(params.value)}</div>
+              <div class="total">{total.value}</div>
+              <div class="current">{current.value}</div>
+              <div class="pageSize">{pageSize.value}</div>
+              <div class="totalPage">{totalPage.value}</div>
+              <div class="reload" onClick={() => reload()} />
+              <div class="next" onClick={() => (current.value = ++_current)} />
+            </div>
+          );
+        },
+      }),
+    );
+
+    const paramsEl = wrapper.find('.params');
+    const totalEl = wrapper.find('.total');
+    const currentEl = wrapper.find('.current');
+    const pageSizeEl = wrapper.find('.pageSize');
+    const totalPageEl = wrapper.find('.totalPage');
+    const reloadEl = wrapper.find('.reload');
+    const nextEl = wrapper.find('.next');
+
+    await waitForTime(1000);
+    for (let index = 0; index < 100; index++) {
+      await nextEl.trigger('click');
+      await waitForTime(1000);
+      expect(paramsEl.text()).toBe(`[{"current":${_current},"pageSize":10}]`);
+      expect(totalEl.text()).toBe('100');
+      expect(currentEl.text()).toBe(`${_current}`);
+      expect(pageSizeEl.text()).toBe('10');
+      expect(totalPageEl.text()).toBe('10');
+    }
+
+    await reloadEl.trigger('click');
+    _current = 1;
+    await waitForTime(1000);
+    expect(paramsEl.text()).toBe(`[{"current":${_current},"pageSize":10}]`);
+    expect(totalEl.text()).toBe('100');
+    expect(currentEl.text()).toBe(`${_current}`);
+    expect(pageSizeEl.text()).toBe('10');
+    expect(totalPageEl.text()).toBe('10');
+
+    for (let index = 0; index < 100; index++) {
+      await nextEl.trigger('click');
+      await waitForTime(1000);
+      expect(paramsEl.text()).toBe(`[{"current":${_current},"pageSize":10}]`);
+      expect(totalEl.text()).toBe('100');
+      expect(currentEl.text()).toBe(`${_current}`);
+      expect(pageSizeEl.text()).toBe('10');
+      expect(totalPageEl.text()).toBe('10');
+    }
+  });
 });

src/usePagination.ts

@@ -6,13 +6,14 @@ import generateService from './core/utils/generateService';
 import { IService } from './core/utils/types';
 
 export interface PaginationResult<R, P extends unknown[]>
-  extends Omit<BaseResult<R, P>, 'queries'> {
+  extends Omit<BaseResult<R, P>, 'queries' | 'reset'> {
   current: Ref<number>;
   pageSize: Ref<number>;
   total: Ref<number>;
   totalPage: Ref<number>;
   changeCurrent: (current: number) => void;
   changePageSize: (pageSize: number) => void;
+  reload: () => void;
 }
 
 export interface PaginationExtendsOption {
@@ -24,17 +25,13 @@ export interface PaginationExtendsOption {
   };
 }
 
-export type PaginationFormatOptions<R, P extends unknown[], FR> = Omit<
-  FormatOptions<R, P, FR>,
-  'queryKey'
-> &
-  PaginationExtendsOption;
+export interface PaginationFormatOptions<R, P extends unknown[], FR>
+  extends Omit<FormatOptions<R, P, FR>, 'queryKey'>,
+    PaginationExtendsOption {}
 
-export type PaginationBaseOptions<R, P extends unknown[]> = Omit<
-  BaseOptions<R, P>,
-  'queryKey'
-> &
-  PaginationExtendsOption;
+export interface PaginationBaseOptions<R, P extends unknown[]>
+  extends Omit<BaseOptions<R, P>, 'queryKey'>,
+    PaginationExtendsOption {}
 
 export type PaginationMixinOptions<R, P extends unknown[], FR> =
   | PaginationBaseOptions<R, P>
@@ -76,18 +73,21 @@ function usePagination<R, P extends unknown[], FR>(
     throw new Error('usePagination does not support concurrent request');
   }
 
-  const { data, params, run, queries, ...rest } = useAsyncQuery<R, P, FR>(
-    promiseQuery,
-    {
-      defaultParams: [
-        {
-          [currentKey]: 1,
-          [pageSizeKey]: 10,
-        },
-      ],
-      ...restOptions,
-    },
-  );
+  const finallyOptions = {
+    defaultParams: [
+      {
+        [currentKey]: 1,
+        [pageSizeKey]: 10,
+      },
+    ],
+    ...restOptions,
+  };
+
+  const { data, params, queries, run, reset, ...rest } = useAsyncQuery<
+    R,
+    P,
+    FR
+  >(promiseQuery, finallyOptions);
 
   const paging = (paginationParams: Record<string, number>) => {
     const [oldPaginationParams, ...restParams] = params.value as P[];
@@ -109,15 +109,22 @@ function usePagination<R, P extends unknown[], FR>(
     paging({ [pageSizeKey]: pageSize });
   };
 
+  const reload = () => {
+    const { defaultParams, manual } = finallyOptions;
+    reset();
+    !manual && run(...defaultParams);
+  };
+
   const total = computed<number>(() => get(data.value, totalKey, 0));
   const current = computed({
-    get: () => (params.value[0] as Record<string, number>)[currentKey],
+    get: () => (params.value?.[0] as Record<string, number>)?.[currentKey] ?? 0,
     set: (val: number) => {
       changeCurrent(val);
     },
   });
   const pageSize = computed({
-    get: () => (params.value[0] as Record<string, number>)[pageSizeKey],
+    get: () =>
+      (params.value?.[0] as Record<string, number>)?.[pageSizeKey] ?? 10,
     set: (val: number) => {
       changePageSize(val);
     },
@@ -136,6 +143,7 @@ function usePagination<R, P extends unknown[], FR>(
     run,
     changeCurrent,
     changePageSize,
+    reload,
     ...rest,
   };
 }