>首页> 科技 >

世界速读：Vue3这样写列表页，让性能更好更高效！

时间:2022-12-23 19:10:11       来源:PHP中文网
在开发管理后台过程中，一定会遇到不少了增删改查页面，而这些页面的逻辑大多都是相同的，这样子会导致代码耦合度越来越高，下面，我们将这些可复用的数据抽离出来成hook，既解决耦合度的问题又提高工作效率。

在开发管理后台过程中，一定会遇到不少了增删改查页面，而这些页面的逻辑大多都是相同的，如获取列表数据，分页，筛选功能这些基本功能。而不同的是呈现出来的数据项。还有一些操作按钮。【相关推荐：vuejs视频教程、web前端开发】


(相关资料图)

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

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

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

前置知识

VueVue Composition Api

封装

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

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

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

如何获取列表数据

思考一番，让useList函数接收一个listRequestFn参数，用于请求列表中的数据。

定义一个list变量，用于存放网络请求回来的数据内容，由于在内部无法直接确定列表数据类型，通过泛型的方式让外部提供列表数据类型。

export default function useList(  listRequestFn: Function) {  // 忽略其他代码  const list = ref([]);}
登录后复制

在useList中创建一个loadData函数，用于调用获取数据函数，该函数接收一个参数用于获取指定页数的数据（可选，默认为curPage的值）。

执行流程设置加载状态调用外部传入的函数，将获取到的数据赋值到list和total中关闭加载态
export default function useList(  listRequestFn: Function) {  // 忽略其他代码  // 数据  const list = ref([]);  // 过滤数据  // 获取列表数据  const loadData = async (page = curPage.value) => {    // 设置加载中    loading.value = true;    try {      const {        data,        meta: { total: count },      } = await listRequestFn(pageSize.value, page);      list.value = data;      total.value = count;    } catch (error) {      console.log("请求出错了", "error");    } finally {      // 关闭加载中      loading.value = false;    }  };}
登录后复制

别忘了，还有切换分页要处理

使用 watch函数监听数据，当curPage，pageSize的值发生改变时调用loadData函数获取新的数据。

export default function useList(  listRequestFn: Function) {  // 忽略其他代码  // 监听分页数据改变  watch([curPage, pageSize], () => {    loadData(curPage.value);  });}
登录后复制

现在实现了基本的列表数据获取

实现数据筛选器

在庞大的数据列表中，数据筛选是必不可少的功能

通常，我会将筛选条件字段定义在一个ref中，在请求时将ref丢到请求函数即可。

在 useList 函数中，第二个参数接收一个filterOption对象，对应列表中的筛选条件字段。

调整一下loadData函数，在请求函数中传入filterOption对象即可

export default function useList<  ItemType extends Object,  FilterOption extends Object>(listRequestFn: Function, filterOption: Ref) {  const loadData = async (page = curPage.value) => {    // 设置加载中    loading.value = true;    try {      const {        data,        meta: { total: count },      } = await listRequestFn(pageSize.value, page, filterOption.value);      list.value = data;      total.value = count;    } catch (error) {      console.log("请求出错了", "error");    } finally {      // 关闭加载中      loading.value = false;    }  };}登录后复制
清空筛选器字段
在页面中，有一个重置的按钮，用于清空筛选条件。这个重复的动作可以交给 reset 函数处理。
通过使用 Reflect 将所有值设定为undefined，再重新请求一次数据。
export default function useList<  ItemType extends Object,  FilterOption extends Object>(listRequestFn: Function, filterOption: Ref) {  const reset = () => {    if (!filterOption.value) return;    const keys = Reflect.ownKeys(filterOption.value);    filterOption.value = {} as FilterOption;    keys.forEach((key) => {      Reflect.set(filterOption.value!, key, undefined);    });    loadData();  };}登录后复制
导出功能
除了对数据的查看，有些界面还需要有导出数据功能（例如导出 csv，excel 文件），我们也把导出功能写到useList里
通常，导出功能是调用后端提供的导出Api获取一个文件下载地址，和loadData函数类似，从外部获取exportRequestFn函数来调用Api
在函数中，新增一个exportFile函数调用它。
export default function useList<  ItemType extends Object,  FilterOption extends Object>(  listRequestFn: Function,  filterOption: Ref,  exportRequestFn?: Function) {  // 忽略其他代码  const exportFile = async () => {    if (!exportRequestFn) {      throw new Error("当前没有提供exportRequestFn函数");    }    if (typeof exportRequestFn !== "function") {      throw new Error("exportRequestFn必须是一个函数");    }    try {      const {        data: { link },      } = await exportRequestFn(filterOption.value);      window.open(link);    } catch (error) {      console.log("导出失败", "error");    }  };}登录后复制
优化
现在，整个useList已经满足了页面上的需求了，拥有了获取数据，筛选数据，导出数据，分页功能
还有一些细节方面，在上面所有代码中的try..catch中的catch代码片段并没有做任何的处理，只是简单的console.log一下
提供钩子
在useList新增一个 Options 对象参数，用于函数成功、失败时执行指定钩子函数与输出消息内容。
定义 Options 类型
export interface MessageType {  GET_DATA_IF_FAILED?: string;  GET_DATA_IF_SUCCEED?: string;  EXPORT_DATA_IF_FAILED?: string;  EXPORT_DATA_IF_SUCCEED?: string;}export interface OptionsType {  requestError?: () => void;  requestSuccess?: () => void;  message: MessageType;}export default function useList<  ItemType extends Object,  FilterOption extends Object>(  listRequestFn: Function,  filterOption: Ref,  exportRequestFn?: Function,  options? :OptionsType) {  // ...}登录后复制
设置Options默认值
const DEFAULT_MESSAGE = {  GET_DATA_IF_FAILED: "获取列表数据失败",  EXPORT_DATA_IF_FAILED: "导出数据失败",};const DEFAULT_OPTIONS: OptionsType = {  message: DEFAULT_MESSAGE,};export default function useList<  ItemType extends Object,  FilterOption extends Object>(  listRequestFn: Function,  filterOption: Ref,  exportRequestFn?: Function,  options = DEFAULT_OPTIONS) {  // ...}登录后复制
优化loadData，exportFile函数
基于 elementui 封装 message 方法
import { ElMessage, MessageOptions } from "element-plus";export function message(message: string, option?: MessageOptions) {  ElMessage({ message, ...option });}export function warningMessage(message: string, option?: MessageOptions) {  ElMessage({ message, ...option, type: "warning" });}export function errorMessage(message: string, option?: MessageOptions) {  ElMessage({ message, ...option, type: "error" });}export function infoMessage(message: string, option?: MessageOptions) {  ElMessage({ message, ...option, type: "info" });}
登录后复制
loadData 函数
const loadData = async (page = curPage.value) => {  loading.value = true;  try {    const {      data,      meta: { total: count },    } = await listRequestFn(pageSize.value, page, filterOption.value);    list.value = data;    total.value = count;    // 执行成功钩子    options?.message?.GET_DATA_IF_SUCCEED &&      message(options.message.GET_DATA_IF_SUCCEED);    options?.requestSuccess?.();  } catch (error) {    options?.message?.GET_DATA_IF_FAILED &&      errorMessage(options.message.GET_DATA_IF_FAILED);    // 执行失败钩子    options?.requestError?.();  } finally {    loading.value = false;  }};
登录后复制
exportFile 函数
const exportFile = async () => {  if (!exportRequestFn) {    throw new Error("当前没有提供exportRequestFn函数");  }  if (typeof exportRequestFn !== "function") {    throw new Error("exportRequestFn必须是一个函数");  }  try {    const {      data: { link },    } = await exportRequestFn(filterOption.value);    window.open(link);    // 显示信息    options?.message?.EXPORT_DATA_IF_SUCCEED &&      message(options.message.EXPORT_DATA_IF_SUCCEED);    // 执行成功钩子    options?.exportSuccess?.();  } catch (error) {    // 显示信息    options?.message?.EXPORT_DATA_IF_FAILED &&      errorMessage(options.message.EXPORT_DATA_IF_FAILED);    // 执行失败钩子    options?.exportError?.();  }};
登录后复制
useList 使用方法
<script setup>import { UserInfoApi } from "@/network/api/User";import useList from "@/lib/hooks/useList/index";const filterOption = ref({});const {  list,  loading,  reset,  filter,  curPage,  pageSize,  reload,  total,  loadData,} = useList(  UserInfoApi.list,  filterOption);</script>
登录后复制
本文useList的完整代码在 github.com/QC2168/snip…
（学习视频分享：vuejs入门教程、编程基础视频）
以上就是Vue3这样写列表页，让性能更好更高效！的详细内容，更多请关注php中文网其它相关文章！
 
 

关键词：         
       列表数据 
              
       注册时间 
              
       大多都是 
      



      
      

        
  

      

        

         
      

      

        
 返回首页 返回频道 

      

    
    

      

        

          

            
  相关新闻  

          

          

			  
          

        

        

      

      

        

          
        

        

          
          
          
          
          
          
          
          
          
        

      

    

  
  
         

    

      

        
新闻热点

      

      

        
      

    

    

      

        
奇闻趣事

      

      

        

          
    
                                    
  1.   小米12系列一大一小双旗舰 卢伟冰：向苹果学习，但仍有差距 小米12系列一大一小双旗舰 卢伟冰：向苹果学习，但仍有差距  
    2. 
                        
  2.   腾讯光子工作室研发！雪中悍刀行手游今日正式官宣 腾讯光子工作室研发！雪中悍刀行手游今日正式官宣  
    3. 
                        
  3.   听力下降别再甩锅耳机 耳机使用中的三个伤耳习惯 听力下降别再甩锅耳机 耳机使用中的三个伤耳习惯  
    4. 
                        
  4.   支付宝蚂蚁森林回应为什么一直不见沙柳？今天上沙柳！ 支付宝蚂蚁森林回应为什么一直不见沙柳？今天上沙柳！  
    5. 
                        
  5.   Adobe Photoshop Camera要来了？App Store预计4月14日发行 Adobe Photoshop Camera要来了？App Store预计4月14日发行  
    6. 
                        
  6.   一图看懂荣耀30S：麒麟820+6400万全焦段AI四摄 一图看懂荣耀30S：麒麟820+6400万全焦段AI四摄  
    7. 
                                  

        

      

    

    

      

        
频道推荐

      

      

        
      

    

  





  

    
 返回网站首页 返回频道首页 

  



 


 

  
 
Copyright 2015-2020   三好互联网  版权所有        联系邮箱：435 22 640@qq.com  备案号： 京ICP备2022022245号-21