vue3前端开发-小兔鲜项目-使用逻辑函数拆分业务模块

vue3前端开发-小兔鲜项目-使用逻辑函数拆分业务模块!其实就是把一些单独的业务代码组成一个js文件。抽离出去后,方便后面的维护。


如图,在一级分类下面新建一个文件夹。composables里面新建2个js文件。

分别封装之前的分类,和banner的代码。


import { onBeforeRouteUpdate } from 'vue-router'
import {ref,onMounted} from 'vue'
import {useRoute} from 'vue-router'
import {getCategoryAPI} from '@/apis/category'
export function useCategory(){const categoryData = ref({})const route = useRoute()const getCagegoryData = async (id = route.params.id) =>{// 如何在setup中获取路由参数 useRoute() -> route 等价于this.$routeconst res = await getCategoryAPI(id)categoryData.value = res.result}onMounted(()=> getCagegoryData())onBeforeRouteUpdate((to)=>{//把动态变化的路由参数值传递给函数getCagegoryData(to.params.id)})return {categoryData}
}

最后需要把模块需要使用的数据,return出去就行了。是一个对象。


import {ref,onMounted} from 'vue'
import { getBannerAPI } from "@/apis/home"
export function userBanner() {const bannerList = ref([])const getBanner = async () =>{const res = await getBannerAPI({ distributionSite:'2'})bannerList.value = res.result}onMounted(()=> getBanner())return {bannerList}
}

在模块页面内调用就行了。


如图,直接调用就行了。

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

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

相关文章

【【深入浅出FPGA内部资源CLB的解析】】

深入浅出FPGA内部资源CLB的解析 FPGA的基本组成单元: CLB资源等 详细介绍一下CLB可分为CLBLL和CLBLM两类, 这是单纯的以Xilinx旗下的FPGA的某一款为例,单纯的只是介绍个概念性的东西。SliceL和SliceM内部都包含4个6输入查找表(L…

[Spring] Spring日志

🌸个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 🏵️热门专栏: 🧊 Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 🍕 Collection与…

AI在候选人评估中的作用:精准筛选与HR决策的助力

一、引言 随着科技的迅猛发展,人工智能(AI)技术已逐渐渗透到各个行业和领域,人力资源管理(HRM)亦不例外。在候选人评估的环节中,AI技术以其高效、精准的特性,正在逐步改变着传统的招…

深度学习 —— 个人学习笔记6(权重衰减)

声明 本文章为个人学习使用,版面观感若有不适请谅解,文中知识仅代表个人观点,若出现错误,欢迎各位批评指正。 十三、权重衰减 使用以下公式为例做演示: y 0.05 ∑ i 1 d 0.01 x i ε w h e r e ε ~ N…

从PyTorch官方的一篇教程说开去(4 - Q-table来源及解决问题实例)

偷个懒,代码来自比很久之前看的书,当时还在用gym,我做了微调以升级到gymnasium当前版本,确保可以正常演示。如果小伙伴或者原作者看到了麻烦提一下,我好备注一下出处。 您的进步和反馈是我最大的动力,小伙…

外贸客户类型,到底怎么区分?

更多外贸干货及开发客户的方法,尽在微信【千千外贸干货】 在问外贸主要客户是谁?是不是觉得得一个个联系国外的商店啊?别急,今天就让我这个有12年外贸经验的老司机来给你们深度解析一下,外贸最主流的5大客户类型&#…

语音识别 语音识别项目相关笔记内容

语音识别 语音识别项目相关笔记内容 语音识别应用范畴语音识别框架语音基本操作使用scipy.io.wavfile读取wav音频文件获取采样率、长度、通道数使用numpy读取pcm格式音频文件读取wav音频文件,并绘制图像读取双声道的wav音频文件,分别绘制不同声道的波形图读取一个采样率为16k…

【Docker】Docker Desktop - WSL update failed

问题描述 Windows上安装完成docker desktop之后,第一次启动失败,提示:WSL update failed 解决方案 打开Windows PowerShell 手动执行: wsl --set-default-version 2 wsl --update

使用 vue-element-plus-admin 框架遇到的问题记录

项目打包遇到的问题: 打包语句:pnpm run build:pro 报错信息: Error: [vite]: Rollup failed to resolve import "E:/workplace_gitee/xxx/node_modules/.pnpm/element-plus2.5.5_vue3.4.15/node_modules/element-plus/es/components…

Matlab-FPGA 小数转换为定点二进制小数脚本和转coe文件格式脚本

Matlab-FPGA 小数转换为定点二进制小数脚本: % 更新于2023年6月17日,修改旋转因子文件,不修改fpga %首先明确我们的二维FFT的数组维数,此为1024*8的二维矩阵,1024行,8列 column 1024; row 8; nk[]; Ncolumn*row; fo…

【精品资料】数据安全治理解决方案(27页PPT)

引言:数据安全治理解决方案是一个综合性的体系,旨在通过策略、技术、流程和人力的有机结合,全面提升组织的数据安全防护能力,保障数据资产的安全与合规。 方案介绍:数据安全治理解决方案是组织为确保其数据资产的安全性…

Spark内核的设计原理

导读: 本期是DataFun深入浅出Apache Spark第一期的分享,主讲老师耿嘉安开场介绍了自己的从业经历,当前就职的数新网络与Spark相关的两款产品赛博数智引擎CyberEngine和赛博数据智能平台CyberData。 本次分享题目为《Spark内核的设计原理》&…

智能化一体闸门:助力行业发展

随着科技的飞速发展,智能化技术已经渗透到各个行业和领域,其中水利行业也不例外。智能化一体闸门以其高效、智能、便捷的特点,正助力着行业发展。 一、智能化一体闸门的定义与特点 智能化一体闸门,是集成了先进传感技术、自动控制…

Transformer之Swin-Transformer结构解读

写在最前面之如何只用nn.Linear实现nn.Conv2d的功能 很多人说,Swin-Transformer就是另一种Convolution,但是解释得真就是一坨shit,这里我郑重解释一下,这是为什么? 首先,Convolution是什么? Co…

java网络编程TCP和UDP协议

一、TCP 1、服务器端 package udpTest;import javax.management.MBeanRegistrationException; import java.io.*; import java.net.ServerSocket; import java.net.Socket;public class TCPService {public static void main(String[] args) {try {byte[] bufnew byte[512];Se…

什么是离线语音识别芯片?与在线语音识别的区别

离线语音识别芯片是一种不需要联网和其他外部设备支持,‌上电即可使用的语音识别系统。‌它的应用场合相对单一,‌主要适用于智能家电、‌语音遥控器、‌智能玩具等,‌以及车载声控和一部分智能家居。‌离线语音识别芯片的特点包括小词汇量、…

Python文件写入读取,文件复制以及一维,二维,多维数据存储

基础解释 在 Python 中,文件操作的模式除了 w (只写)、 a (追加写)、 r (只读)外,还有以下几种常见模式:- r :可读可写。该文件必须已存在,写操…

生成 HTTPS 证书并配置到 Nginx 的完整步骤

步骤 1: 安装 acme.sh 如果你还没有安装 acme.sh,可以通过以下命令进行安装: curl https://get.acme.sh | sh步骤 2: 生成 HTTPS 证书 使用 acme.sh 生成 forum.selectious.fun 的证书。你可以使用 standalone 模式,这意味着 acme.sh 会在…

视觉SLAM--回环检测

文章目录 创建字典相似度计算增加字典规模 回环检测的意义:可以使 后端位姿图得到一个 全局一致估计。 视觉SLAM的主流做法: 基于外观的回环检测方法,仅 根据两幅图像的相似性确定回环检测关系。这种方法,摆脱了累计误差&…

分类损失函数 (一) torch.nn.CrossEntropyLoss()

1、交叉熵 是一种用于衡量两个概率分布之间的距离或相似性的度量方法。机器学习中,交叉熵常用于损失函数,用于评估模型的预测结果和实际标签的差异。公式: y:真是标签的概率分布,y:模型预测的概率分布 …