详解vue3.0 的 Composition API 的一种使用方法

2023-07-13 07:31:03 79

网上讨论的文章已经很多了，这里举一个简单的例子来讨论一下CompositionAPI的用法，具体问题才好具体讨论嘛。

假如我们要做一个论坛的讨论列表和分页，以前是把需要的数据都放在data里面，事件都放在methods里面，代码少的话还好分辨，如果代码多了，看着就头疼了。
现在vue3.0可以按照业务关系分成多个管理类来管理这些代码。

比如帖子列表+发帖功能，我们先做一个模板：
（简单表示一下，不做美化处理了）

上面的模板部分没有啥区别，变化部分在js代码。
我们可以先写一个帖子列表的管理类，包含帖子列表的数据，和依据页号加载数据的方法。

代码如下：

//帖子列表的管理类
constmanageArticleList=()=>{
constarticleList=ref([
{
title:'这是帖子',
viewCount:100,
sendTime:'2020-10-20'
}
])

//依据页号加载帖子列表
constloagActicleListByPage=(pageIndex)=>{
//alert(pageIndex)
articleList.value=[
{
title:'这是新加载的帖子帖子',
viewCount:100+parseInt(pageIndex),
sendTime:'2020-10-20'
}
]
}

return{
articleList,
loagActicleListByPage
}
}

再写一个分页的管理类（使用antdv的a-pagination），代码如下

//分页管理类
constmanageActiclePage=()=>{
constacticleCurrent=ref(0)

return{
acticleCurrent
}
}

最后我们可以在setup里面把这两个管理类给结合起来，一起返回给view。

exportdefault{
setup(){
//引入查询管理
const{articleList,loagActicleListByPage}=manageArticleList()
//引入分页管理
const{acticleCurrent}=manageActiclePage()

//监听页号变化，加载数据
watch(acticleCurrent,(newValue,oldValue)=>{
loagActicleListByPage(newValue)
})
//返回给view
return{
articleList,
acticleCurrent,
}
}
}

在setup里面，监听acticleCurrent页号变化，调用manageArticleList的loagActicleListByPage事件，加载数据。
当然也可以有其他的组合方式，这里只是举个简单的例子。

这样代码可以根据业务逻辑分散开，便于扩展和维护，比如我们要加一个查询功能，那么可以在manageArticleList里面加个loagActicleListByQuery的事件。

最后的效果就是，代码依据业务逻辑，完全分散成多个管理类，setup只需要负责加载和整合即可，setup里面也不会有很多代码。

管理类应该可以写在单独的js文件里面，比如我们把表单的js代码写在单独的js文件里面：(bbs-manageArticleForm.js)

import{ref}from'vue'

//帖子列表的管理类
exportfunctionmanageArticleForm(){
constmodelForm=ref(
{
title:'这是帖子标题',
content:'帖子内容',
sendTime:'2020-10-20'
}
)
//依据页号加载帖子列表
constsendArticle=()=>{
//调用axios向后端提交
alert('假装发表成功了。。。')
}
return{
articleForm:modelForm,
sendArticle
}
}

然后在views里面用import引入

import{manageArticleForm}from'./bbs-manageArticleForm.js'

在setup里面设置如下：

setup(){
......
//表单
const{articleForm,sendArticle}=manageArticleForm()

//返回给view
return{
......
articleForm,
sendArticle,
......
}
}

写在单独的js文件里面，意味着可以复用。不仅这里可以用，其他的地方也可以直接拿过来用。好吧，这个表单基本没啥可以好复用的，这里只是举个例子。

总结

到此这篇关于vue3.0的CompositionAPI的一种使用方法的文章就介绍到这了,更多相关vue3.0CompositionAPI内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

详解vue3.0 的 Composition API 的一种使用方法

热门推荐

随机推荐