vue3封装Hooks实现更好的逻辑复用过程

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const x = ref(0)
const y = ref(0)

function update(event) {
  x.value = event.pageX
  y.value = event.pageY
}

onMounted(() => window.addEventListener('mousemove', update))
onUnmounted(() => window.removeEventListener('mousemove', update))
</script>

<template>Mouse position is at: {{ x }}, {{ y }}</template>

// mouse.js
import { ref, onMounted, onUnmounted } from 'vue'

// 按照惯例，组合式函数名以“use”开头
export function useMouse() {
  // 被组合式函数封装和管理的状态
  const x = ref(0)
  const y = ref(0)

  // 组合式函数可以随时更改其状态。
  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }

  // 一个组合式函数也可以挂靠在所属组件的生命周期上
  // 来启动和卸载副作用
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  // 通过返回值暴露所管理的状态
  return { x, y }
}

<script setup>
import { useMouse } from './mouse.js'

const { x, y } = useMouse()
</script>

<template>Mouse position is at: {{ x }}, {{ y }}</template>

<BorderBox8 class="borderbox8" :key="key"></BorderBox8>
...
// dataV宽高自适应的key
let key = ref(1);

// 宽高改变框图自适应
function initBorder() {
	window.addEventListener('resize', function () {
		nextTick(() => {
			key.value++;
		});
	});
}
initBorder();

/*
 * @Description: 公用的Datav初始化逻辑，在使用dataV组件时使用
 */
import { ref, onMounted, nextTick } from 'vue';

export function useBorder() {
	const key = ref<number>(1);

	function initBorder() {
		nextTick(() => {
			console.log('resize', key.value);
			key.value++;
		});
	}
	onMounted(() => {
		window.addEventListener('resize', initBorder);
	});
	return { key };
}

import { useBorder } from '@/hooks/useBorder';
const { key } = useBorder();

export interface ListResponse<R extends object> {
	code: number;
	data: {
		list: R[];
	};
}
/*
 * @Description: 公用的table逻辑，在使用表格时使用
 */
import { HttpResponse } from '@/utils/request';
import { Paging, ListResponse } from '@/api/types';
import { computed, reactive, toRefs } from 'vue';


interface TableState<R extends object> {
	tableData: R[];
	loading: boolean;
}
interface OtherSearchParams {
	[key: string]: unknown;
}
interface TableBaseMethodsType<R extends object> {
	requestApi: (
		page: number,
		keyword?: string
	) => Promise<HttpResponse<ListResponse<R>>>;
	otherSearchParams?: OtherSearchParams;
}
// table的常见数据请求和分页交互
// 接收：表格数据的范型T, 请求方法以及参数
// 抛出以下:
export default function useTable<R extends object>(
	config: TableBaseMethodsType<R>
) {
	const { otherSearchParams = {}, requestApi } = config;
	const tableState = reactive<TableState<R>>({
		loading: false,
		tableData: []
	});
	// 分页参数
	const pageParams = reactive<Paging>({
		page: 1
	});
	// 分页器配置项
	const pagination = computed(() => {
		return {
			total: tableState.tableData.length,
			curruntPage: pageParams.page
		};
	});
	/**
	 * @description: 请求加载数据
	 * @return {*}
	 */
	const loadList = async () => {
		const page = pageParams.page;
		const params = { ...otherSearchParams };
		// console.log(params, 'params');
		tableState.loading = true;
		try {
			const res = await requestApi(page, params.keyword);
			console.log(res);
			if (res.status === 200) {
				console.log(res.data.data.list, 'data');
				tableState.tableData = res.data.data.list;
				console.log(tableState.tableData, '111');
			}
		} catch (error) {
			console.log(error);
			tableState.tableData = [];
		} finally {
			tableState.loading = false;
		}
	};
	return {
		...toRefs(tableState),
		...toRefs(pageParams),
		pagination,
		loadList
	};
}

h (error) {
console.log(error);
tableState.tableData = [];
} finally {
tableState.loading = false;
}
};
return {
…toRefs(tableState),
…toRefs(pageParams),
pagination,
loadList
};
}