In the process of developing the management backend, you will definitely encounter a lot of add, delete, modify and query pages, and most of the logic of these pages are the same, such as basic functions such as obtaining list data, paging, and filtering functions. The difference is the data items presented. There are also some action buttons.
When there are only 1 or 2 pages at the beginning, most developers may directly copy the previous page code. As the project progresses, the number of similar pages may become more and more, which directly affects the project. Code coupling is getting higher and higher.
This is also one of the main reasons why some reusable functions or components should be extracted from the project.
Below, we encapsulate a general useList that is suitable for most add, delete, modify and check list pages, allowing you to complete tasks faster and more efficiently, and get off work on time ~
prerequisite knowledge
-
View
-
API Composition View[1]
encapsulation
We need to extract some common parameters and functions and encapsulate them into a general onehook. It will be easier and more convenient to reuse the same functions on other pages later.
Define essential paging data for list pages
export default function useList() {
// 加载态
const loading = ref(false);
// 当前页
const curPage = ref(1);
// 总数量
const total = ref(0);
// 分页大小
const pageSize = ref(10);
}