当前位置: 首页 > news >正文

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

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

 

对于刚开始只有 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.lryc.cn/news/36110.html

相关文章:

  • 锐捷AP设置限速(胖模式)
  • 聚势合力,电巢与SDIA协会“战略合作签约仪式”圆满落成
  • Linux安装后基础配置--网络--ssh--基本软件
  • 剑指 Offer 66. 构建乘积数组
  • 1.1 误差的来源
  • python进程间通信
  • 麒麟Linux操作系统磁盘策略永久调整为deadline
  • yum安装Docker(CentOS7.9)
  • c++错误 free(): double free detected
  • 12升400V 升压DC-DC高压脱毛仪解决方案SC3671
  • h264格式分析
  • 【数据分析师求职面试指南】实战技能部分
  • 树与二叉树(二叉树的表示,性质,遍历,还原)
  • mysql 源码学习理解记录--lock_rec_move
  • markdown(.md)常用语法
  • 千言数据集赛题介绍
  • 信息技术最全总结(备考教资)
  • opencv识别车道线(霍夫线变换)
  • MySQL的同步数据Replication功能
  • 2023年全国最新高校辅导员精选真题及答案17
  • 中文代码92
  • Python SEO采集海量文本标题,用倒排索引找出“类似的标题“代码实现
  • 模型杂谈:快速上手元宇宙大厂 Meta “开源泄露”的大模型(LLaMA)
  • RedisCluster集群模式下master宕机主从切换期间Lettuce连接Redis无法使用报错Redis command timed out的问题
  • Xuetr杀毒工具使用实验(28)
  • fastapi(https)+openssl+测试(双向校验)
  • TiDB Server
  • S3C2440移植Linux4.19.275内核以及过程中遇到的问题
  • 解忧杂货铺(二):UML时序图
  • 微信小程序的代码由哪些结构组成?