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


Posted in Javascript onOctober 26, 2020

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

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

比如帖子列表+发帖功能,我们先做一个模板:
(简单表示一下,不做美化处理了)

<template>
 <div>
  论坛列表
  <div v-for="(item, index) in articleList" :key="'articleList' + index">
  {{index}}:{{item.title}}
  {{item.viewCount}}
  </div>
  <div><!--分页-->
  <a-pagination v-model:current="acticleCurrent" :total="50" show-less-items />
  </div>
 </div>
 <div style="width:400px">
  发个帖子
  标题:<a-input v-model:value="articleForm.title"/>
  内容:<a-input v-model:value="articleForm.content"/>
  <a-button type="dashed" @click="sendArticle" >发表帖子</a-button>
 </div>
</template>

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

代码如下:

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

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

 return {
 articleList,
 loagActicleListByPage
 }
}

再写一个分页的管理类(使用antdv的a-pagination),代码如下

// 分页管理类
const manageActiclePage = () => {
 const acticleCurrent = ref(0)

 return {
 acticleCurrent
 }
}

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

export default {
 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'

// 帖子列表的管理类
export function manageArticleForm () {
 const modelForm = ref(
 {
  title: '这是帖子标题',
  content: '帖子内容',
  sendTime: '2020-10-20'
 }
 )
 // 依据页号加载帖子列表
 const sendArticle = () => {
 // 调用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 的 Composition API 的一种使用方法的文章就介绍到这了,更多相关vue3.0 Composition API 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 动态调整图片尺寸实现代码
Dec 28 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
JsRender for object语法简介
Oct 31 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 Javascript
Vue实现简单的拖拽效果
Aug 25 Javascript
js实现批量删除功能
Aug 27 Javascript
基于vue实现微博三方登录流程解析
Nov 04 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 #Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 #Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 #Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 #Javascript
jQuery实现简单评论区功能
Oct 26 #jQuery
vue.js封装switch开关组件的操作
Oct 26 #Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 #Javascript
You might like
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
AngularJS ng-change 指令的详解及简单实例
2016/07/30 Javascript
详解ES6中的let命令
2020/04/05 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
JS实现商品筛选功能
2020/08/19 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
先进个人获奖感言
2014/01/24 职场文书
介绍信范文
2015/01/31 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
员工工作表扬信
2015/05/05 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技