详解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如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 Javascript
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
Angular中的Promise对象($q介绍)
Mar 03 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
Position属性之relative用法
Dec 14 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 Javascript
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
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数据库操作方法(MYSQL版)
2011/06/08 PHP
调整PHP的性能
2013/10/30 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
js查找父节点的简单方法
2008/06/28 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
js实现表格字段排序
2014/02/19 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
小程序分享模块超级详解(推荐)
2019/04/10 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
python django 实现验证码的功能实例代码
2017/05/18 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
django 将model转换为字典的方法示例
2018/10/16 Python
django的ORM模型的实现原理
2019/03/04 Python
人工神经网络算法知识点总结
2019/06/11 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
高中校园广播稿
2014/01/11 职场文书
金融专业求职信
2014/08/05 职场文书
事业单位人员的自我评价范文
2014/09/21 职场文书
文明上网主题班会
2015/08/14 职场文书
Oracle11g R2 安装教程完整版
2021/06/04 Oracle
MySQL系列之十二 备份与恢复
2021/07/02 MySQL