通过 Vue 3 组合式 API 优化 Uni-app 基础页面功能

Uni-app 是一个跨平台的应用开发框架,支持同时开发小程序、App 和 H5 等多个平台。而 Vue 3 的组合式 API 则是 Vue 3 新增的特性之一,它可以让我们更好地组织和复用组件逻辑。本文将结合 Vue 3 的组合式 API,来优化 Uni-app 中基础页面的功能实现。

1. 使用 ref 创建响应式数据

在 Vue 3 中,我们可以使用 ref 创建响应式数据。在 Uni-app 中,我们可以利用这一特性来管理页面中的状态和数据。比如,在基础页面中,我们经常需要管理页面数据、加载状态、分页信息等。我们可以这样来使用:

import { ref } from 'vue';export default function usePage() {const pageData = ref({});const status = ref('more');const totalPage = ref(0);const total = ref(0);// 其他逻辑...return { pageData, status, totalPage, total };
}

2. 使用组合式 API 分离逻辑

将页面逻辑按功能拆分成不同的组合函数,可以使代码更加清晰和可维护。比如,我们可以将页面初始化逻辑、数据请求逻辑、加载更多数据逻辑等分别放在不同的函数中,然后在页面中组合使用。

  const initData = async () => {searchObject.value.no = 1await getData();uni.stopPullDownRefresh();};onPullDownRefresh(async () => {await initData();})const checkMore = (res) => {totalPage.value = res.totalPage;total.value = res.total;if (searchObject.value.no <= res.totalPage) {status.value = "loading";} else {status.value = "noMore";}}const getData = async () => {let res = await post(functionMethod, searchObject.value);if (res.code !== 200) {uni.showModal({content: res.msg,showCancel: false})return;}pageData.value = res.data;pageData1.value = JSON.parse(JSON.stringify(pageData.value))checkMore(res)if(functionMethod === '/saleOrder/search') {pageData.value.forEach((e) => {e.checked = false})}};const loadMore=async () => {searchObject.value.no = searchObject.value.no + 1;let res = await post(functionMethod, searchObject.value);if (res.code !== 200) {uni.showModal({content: res.msg,showCancel: false})return;}if (res.data) {pageData.value = pageData.value.concat(res.data);}checkMore(res)}

3. 页面生命周期的处理

在 Uni-app 中,页面的生命周期函数可以通过 onShowonLoad 等方式进行处理。我们可以在组合函数中使用这些生命周期函数,并结合上面的逻辑函数进行调用。

	onPullDownRefresh(async () => {await initData();})onReachBottom(async () => {await loadMore();});onShow(async () => {await getData()})

4.完整代码

import {ref} from "vue";
import {post} from "/common/api.js"
import {onShow,onPullDownRefresh,onReachBottom
} from "@dcloudio/uni-app";export function usePage(functionMethod, searchObject) {//集合let pageData = ref({})let pageData1 = ref({})//加载的状态const status = ref("more")//总页数const totalPage = ref(0)//总条数const total = ref(0)const initData = async () => {searchObject.value.no = 1await getData();uni.stopPullDownRefresh();};const checkMore = (res) => {totalPage.value = res.totalPage;total.value = res.total;if (searchObject.value.no <= res.totalPage) {status.value = "loading";} else {status.value = "noMore";}}const getData = async () => {let res = await post(functionMethod, searchObject.value);if (res.code !== 200) {uni.showModal({content: res.msg,showCancel: false})return;}pageData.value = res.data;pageData1.value = JSON.parse(JSON.stringify(pageData.value))checkMore(res)if(functionMethod === '/saleOrder/search') {pageData.value.forEach((e) => {e.checked = false})}};const loadMore=async () => {searchObject.value.no = searchObject.value.no + 1;let res = await post(functionMethod, searchObject.value);if (res.code !== 200) {uni.showModal({content: res.msg,showCancel: false})return;}if (res.data) {pageData.value = pageData.value.concat(res.data);}checkMore(res)}onPullDownRefresh(async () => {await initData();})onReachBottom(async () => {await loadMore();});onShow(async () => {await getData()})return {pageData,pageData1, status, totalPage, initData, total,loadMore}
}

5.代码使用

	const {pageData,status,totalPage,total,initData} = usePage("/saleOrderSummary/topByShop", searchObject);

通过以上的优化,我们可以更好地利用 Vue 3 的组合式 API 来优化 Uni-app 中基础页面的功能实现,使代码更加清晰、易读和可维护。

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

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

相关文章

自动化运维(二十三)Ansible 实战动态库存插件和回调插件

Ansible 支持多种类型的插件&#xff0c;这些插件可以帮助你扩展和定制 Ansible 的功能。每种插件类型都有其特定的用途和应用场景。今天我们一起学习动态库存插件和回调插件。 一、动态库存插件 Ansible 动态库存插件允许从各种外部数据源动态获取库存信息&#xff0c;包括主…

AndroidAutomotive模块介绍(一)整体介绍

前言 Android Automotive 是一个基本 Android 平台&#xff0c;可运行 IVI 系统中预安装的 Android 应用以及可选的第二方和第三方 Android 应用。 本系列文档将会系统的介绍 Android Automotive 的功能、架构、逻辑等。模块逻辑将从 应用api接口、系统服务、底层服务&#x…

软件设计师:11-结构化开发与UML

结构化开发&#xff08;3-4分&#xff09; 一、模块化 二、耦合&#xff08;背&#xff09; 三、内聚&#xff08;背&#xff09; 四、设计原则&#xff08;背&#xff09; 五、系统文档 六、数据流图 数据流的起点或终点必须有一个是加工 判断依据&#xff1a; 1、…

Vivado Design Suite中route_design命令脚本示例

本文详细介绍了四个route_design命令的示例脚本&#xff0c;这些脚本需要添加到工程的约束文件.xdc中&#xff0c;结果保存在工程文件中的runs\impl_1中的runme.log文件。 一、示例脚本1 route_design write_checkpoint -force $outputDir/post_route report_timing_summary …

img使用 :src 动态绑定图片地址,图片不成功

使用vue cli 创建的vue2项目&#xff0c;项目中想实现轮播效果。 出现的问题&#xff1a; 使用 :src 动态绑定图片地址&#xff0c;图片没有出现 <el-carousel :interval"3000" arrow"always"><el-carousel-item v-for"(item,index) in sw…

【MATLAB源码-第46期】基于matlab的OFDM系统多径数目对比,有无CP(循环前缀)对比,有无信道均衡对比。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 OFDM&#xff08;正交频分复用&#xff09;是一种频域上的多载波调制技术&#xff0c;经常用于高速数据通信中。以下是关于多径数目、有无CP&#xff08;循环前缀&#xff09;以及有无信道均衡在OFDM系统中对误码率的影响&am…

6-125 二叉树的后序遍历(Python语言描述)

本题要求输出二叉树的后序遍历,输出格式见样例。 函数接口定义: #后序遍历 def postOrder(T)其中二叉树类的定义如下: #二叉树的存储-二叉链表 class BinaryTree:#1.构造方法def __init__(self,newValue):self.key = newValue #树根self.left = None #左子树初…

小程序如何通过把动态数据值传入到css文件中控制样式

场景&#xff1a;动态改变一个模块的高度 一、常用解决方法&#xff1a;行内样式绑值&#xff0c;或者动态class来传递 <viewclass"box":style"height: ${boxHeight}px">我是一个动态高度的box,我的高度是{{boxHeight}}px </view>二、高度传…

第07-1章 计算机网络相关概念

7.1 本章目标 了解网络协议的概念了解网络体系结构熟悉ISO/OSI参考模型以及每一层的功能掌握TCP/IP模型各层的主要协议及其功能熟练掌握IP地址、子网规划等相关内容 7.2 网络协议的概念 7.2.1 概念介绍 &#xff08;1&#xff09;网络协议&#xff1a;计算机网络和分布系统中…

循序渐进丨MogDB 数据库带级联从库的集群切换后如何保持原有架构?

生产数据库运行过程中可能会涉及到升级或者打补丁&#xff0c;导致各节点的角色有计划的发生改变。如果集群内角色发生改变&#xff0c;是否还能保持原有架构继续对外提供服务呢&#xff1f;我们来做一下测试。 采用22模式模拟同城两机房部署4节点 MogDB 数据库集群&#xff0c…

K8S临时存储-本地存储-PV和PVC的使用-动态存储(StorageClass)

介绍 容器中的文件在磁盘上是临时存放的&#xff0c;当容器崩溃或停止时容器上面的数据未保存&#xff0c; 因此在容器生命周期内创建或修改的所有文件都将丢失。 在崩溃期间&#xff0c;kubelet 会以干净的状态重新启动容器。 当多个容器在一个 Pod 中运行并且需要共享文件时…

gitlab、jenkins安装及使用文档二

安装 jenkins IP地址操作系统服务版本192.168.75.137Rocky9.2jenkins 2.450-1.1 jdk 11.0.22 git 2.39.3192.168.75.138Rocky9.2gitlab-ce 16.10.0 结合上文 jenkins安装 前期准备&#xff1a; yum install -y epel-release yum -y install net-tools vim lrzsz wget…

WSL访问adb usb device

1.Windows上用PowerShell运行&#xff1a; winget install --interactive --exact dorssel.usbipd-win 2.在WSLUbuntu上终端运行&#xff1a; sudo apt install linux-tools-generic hwdata sudo update-alternatives --install /usr/local/bin/usbip usbip /usr/lib/linux-too…

Gitea是一个开源、轻量级的自托管Git解决方案

Gitea介绍 Gitea是一个由Go语言编写的、轻量级的、自托管的Git解决方案&#xff0c;类似于GitHub、GitLab等平台。它是用Go语言编写的开源软件&#xff0c;提供了Git版本控制系统的基本功能&#xff0c;包括代码托管、问题跟踪、代码审查、Wiki等。Gitea的设计目标是简单易用、…

Swift中的枚举

在Swift中&#xff0c;枚举&#xff08;Enumeration&#xff09;是一种定义一组相关值的方式。枚举可以包含零个或多个成员&#xff0c;每个成员可以有关联的值。枚举可以用于定义一组相关的选项、状态或错误类型。 以下是Swift中定义枚举的示例&#xff1a; //定义一个简单的…

酷开科技OTT大屏营销:开启新时代的营销革命

随着互联网技术的不断发展和普及&#xff0c;大屏已经成为越来越多家庭选择的娱乐方式。在这个背景下&#xff0c;酷开科技凭借其强大的技术实力和敏锐的市场洞察力&#xff0c;成功地将大屏转化为一种新的营销渠道&#xff0c;为品牌和企业带来了前所未有的商业机会。 酷开科技…

爬虫jsoup解析工具之解析标题

package day01;import org.jsoup.Jsoup; import org.jsoup.nodes.Document; import org.junit.Test; import java.net.URL; public class JsoupFirstTest {Testpublic void main() throws Exception {/** <!--jsoup解析工具所需依赖--><dependency><groupId>…

【数据结构与算法篇】双链表实现

【数据结构与算法篇】双链表实现&#xff08;近300行实现代码&#xff09; &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;数据结构与算法&#x1f345; &#x1f33c;文章目录&#x1f33c; 1. List.h 头文件的声明 2. List.c 源文…

上海计算机学会 2023年9月月赛 乙组T3 工程建设(拓扑排序)

第三题&#xff1a;T3工程建设 标签&#xff1a;拓扑排序题意&#xff1a;有 n n n个建设任务&#xff0c;第 i i i个建设任务完成时间为 t i t_i ti​。给定 m m m个前置任务要求&#xff0c;第 j j j条规则&#xff0c;若要开工 b j b_j bj​号任务&#xff0c;必须先完成 a…

etcd相关知识整理归纳 —— 筑梦之路

什么是etcd? Etcd 是 CoreOS 团队于2013年6月发起的开源项目&#xff0c;它的目标是构建一个高可用的分布式键值(key-value)数据库。etcd内部采用raft协议作为一致性算法&#xff0c;Etcd基于 Go 语言实现。 名字由来&#xff0c;它源于两个方面&#xff0c;unix的“/etc”文件…