Vue3这样子写页面更快更高效

news2024/11/16 3:27:03

在开发管理后台过程中,一定会遇到不少了增删改查页面,而这些页面的逻辑大多都是相同的,如获取列表数据,分页,筛选功能这些基本功能。而不同的是呈现出来的数据项。还有一些操作按钮。

 

对于刚开始只有 1,2 个页面的时候大多数开发者可能会直接将之前的页面代码再拷贝多一份出来,而随着项目的推进类似页面数量可能会越来越多,这直接导致项目代码耦合度越来越高。

这也是为什么在项目中一些可复用的函数或组件要抽离出来的主要原因之一

下面,我们封装一个通用的useList,适配大多数增删改查的列表页面,让你更快更高效的完成任务,准点下班 ~

前置知识

  • Vue

  • Vue Composition Api[1]

封装

我们需要将一些通用的参数和函数抽离出来,封装成一个通用hook,后续在其他页面复用相同功能更加简单方便。

定义列表页面必不可少的分页数据

export default function useList() {
  // 加载态
  const loading = ref(false);
  // 当前页
  const curPage = ref(1);
  // 总数量
  const total = ref(0);
  // 分页大小
  const pageSize = ref(10);
}

如何获取列表数据

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/399458.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

工作记录:调研monorepo和微前端

2023年1月。因工作项目需要,调研 monorepo 、微前端等技术。 任务 一直在做的 BI 项目,随着需求迭代,模块越来越多,项目越来越复杂、臃肿。 最近,前一阶段的开发工作基本结束。新模块还在设计阶段。借此契机&#xf…

进阶C语言——数据的存储【详解】

文章目录1. 数据类型介绍1.1 类型的基本归类2. 整形在内存中的存储2.1 原码、反码、补码2.2 大小端介绍2.3 练习3. 浮点型在内存中的存储3.1 一个例子3.2 浮点数存储的规则1. 数据类型介绍 前面我们已经学习了基本的内置类型: char //字符数据类型 short //短整型 …

学习ForkJoin

学习ForkJoin一、普通解决多线程方式1、案例一2、效果图二、ForkJoin一、普通解决多线程方式 1、案例一 大数据量的List问题处理,多线程分批处理,需要解决的问题: 下标越界。线程安全。数据丢失。 private static ThreadPoolExecutor thre…

链表OJ之 快慢指针法总结

欢迎来到 Claffic 的博客 💞💞💞 前言: 快慢指针指的是每次指针移动的步长,是解决链表相关的题目的一大利器,下面我将以例题的形式讲解快慢指针法。 目录 一. 链表的中间结点 思路: 代码实…

GMP调度模型总结

优秀文章 什么是GMP调度模型 Golang的一大特色就是Goroutine。Goroutine是Golang支持高并发的重要保障。Golang可以创建成千上万个Goroutine来处理任务,将这些Goroutine分配、负载、调度到处理器上采用的是G-M-P模型。 什么是Goroutine Goroutine Golang Coro…

云舟案例︱视频孪生技术赋能城市安全综合管理场景,提升城市数智化水平

随着城市化发展进程的加快,人口不断膨胀,社会安全隐患等问题日益突出,成为困扰城市建设与管理的重要难题。针对各类社会治安突出问题,城市管理部门积极推进城市信息化建设,视频监控等各类信息化采集手段为城市数字化管…

嵌入式学习笔记——使用寄存器编程实现按键输入功能

文章目录前言模块介绍原理图编程思路前言 昨天,通过配置通用输出模式,实现了LED灯的点亮、熄灭以及流水等操作,解决了通用输出的问题,今天我们再借用最常见的输入模块,按键来实现一个按键控制LED的功能,重…

SpringBoot【知识加油站】---- REST开发

SpringBoot【知识加油站】---- REST开发1. REST 简介2. REST 风格3. RESTful 入门案例1. REST 简介 REST:Representaional State Transfer,表现形式状态转换 传统风格资源描述形式 http://localhost/user/getById?id1 http://localhost/user/saveUser…

91. 解码方法 ——【Leetcode每日刷题】

91. 解码方法 一条包含字母 A-Z 的消息通过以下映射进行了 编码 : ‘A’ -> “1” ‘B’ -> “2” … ‘Z’ -> “26” 要 解码 已编码的消息,所有数字必须基于上述映射的方法,反向映射回字母(可能有多种方法&#xff0…

Kubernetes13:Ingress

Kubernetes13:Ingress 1、把端口号对外暴露,通过ip端口号进行访问 使用Service里面的NodePort实现(Cluster、LoadBanlancer、NodePort) 2、NodePort缺陷 在每个节点上启动一个端口,在访问时候通过任何节点&#xf…

MySQL(五)锁

锁全局锁表级锁表锁元数据锁意向锁行级锁行锁间隙锁&临键锁总结计算机用锁来协调多个进程或线程并发访问某一资源。在数据库中,除传统的计算资源(CPU、RAM、I/O)的争用以外,数据也是一种供许多用户共享的资源。如何保证数据并…

业务流程图TFD和数据流程图DFD例题

业务流程图(TFD)管理业务流程图(Transaction Flow Diagram,简称TFD)用来描述系统各部门、人员之间存在的业务关系、作业顺序以及管理信息流向的图表。绘制该图使用以下四种符号:例题例题1:物资订…

【Unity逆向】玩游戏遇到的“飞天锁血”是怎么实现的?

文章目录前言什么是外挂?锁血瞬移都是怎么做的?Unity引擎的致命缺陷是什么?WEB入侵如何做到?Unity外挂攻防概述典型游戏现实应用Unity开发流程Unity工作界面打包发布方式MonoMono跨平台原理JIT方式优点:因此后期Unity发…

【数据分析师求职面试指南】实战技能部分

文章目录必备技能数据人员如何创造价值完整的指标体系构建数据监控集报表设计设计一份优质的数据分析报告基于互联网大数据的应用A B 测试用户画像完整的数据挖掘项目流程1. ​分析问题,明确目标2.模型可行性分析3.选取模型4.选择变量5.特征工程6.建立模型&效果…

大数据项目实战之数据仓库:用户行为采集平台——第4章 用户行为数据采集模块

第4章 用户行为数据采集模块 4.1 数据通道 4.2 环境准备 4.2.1 集群所有进程查看脚本 1)在/home/atguigu/bin目录下创建脚本xcall [atguiguhadoop102 bin]$ vim xcall2)在脚本中编写如下内容 #! /bin/bashfor i in hadoop102 hadoop103 hadoop104 d…

判断推理之类比推理与定义判断

考点一包含关系(一)种属关系快速判定方法:XX是一种XX。(可以用“是”来造句子)如:苹果:水果;老虎:哺乳动物(二)组成关系快速判定方法:A是B的一部分。(不可以用…

支持向量回归删除异常值Python

1、支持向量回归(SVR)原理 支持向量回归(Support Vector Regression,SVR)不仅可以用于预测,还可以用于异常值检测。其基本思路是训练一个回归模型,通过对每个数据点进行预测,并计算…

基于Transformer的目标检测算法学习记录

前言 本文主要通过阅读相关论文了解当前Transformer在目标检测领域的应用与发展。 谷歌在 ICLR2020 上提出的 ViT(Vision Transformer)是将 Transformer 应用在视觉领域的先驱。从此,打开了Transformer进入CV领域的桥梁,NLP与CV几…

软件测试11

一 Linux命令的基本格式 格式组成:命令主体 -命令选项 命令参数 常见命令形式: (1)命令主体 (2)命令主体 -命令选项 (3)命令主体 参数 (4)命令主体 -命令选项…

深入分析@Bean源码

文章目录一、源码时序图二、源码解析1. 运行案例程序启动类2. 解析AnnotationConfigApplicationContext类的AnnotationConfigApplicationContext(Class<?>... componentClasses)构造方法3. 解析AbstractApplicationContext类的refresh()方法4. 解析AbstractApplicationC…