前言

最近发布了一款支持IOC容器的Vue3框架:Zova。与以往的OOP或者Class方案不同,Zova在界面交互层面仍然采用Setup语法,仅仅在业务层面引入IOC容器。IOC容器犹如一把钥匙,为我们打开了业务工程化的大门,允许我们探索更多工程化方面的设计和能力。有网友提出一个非常好的建议:可否提供一些业务场景,说明有哪些是Class可做而Composable做不了的,这样才更有说服力。

首先说明一点,其实没有哪些业务需求是这个能做而那个不能做的。不同的编程范式带来的是不同的代码风格,不同的编程体验,从不同的路径指向开发效率和代码可维护性方面的评估。因此,最终根据用户自身的偏好和业务实际需求而定。

那么,在这里,我们就针对这个话题如何为路由Query参数标注类型为例,看看Composable和IOC容器的代码风格究竟有什么不同。

需求说明

这里有一个页面组件User,可以通过Query传递三个参数:

参数名 类型 缺省值
id number 0
name string ''
married boolean false

Composable:原生

1. 访问页面

const router = useRouter();
router.push({
path: '/test/demo/user',
query: {
id: 1,
name: 'kevin',
married: false.toString(),
},
});

从Typescript类型的角度来看,这段代码有以下两个问题:

  1. path:没有类型约束和智能提示。这会存在以下三个隐患:

    1. 记不住:如果路径较长,或者单词较复杂,就记不住路径,需要从源文件查找
    2. 写错了:如果不小心写错了,没有提示,只有到实际运行时才会暴露错误
    3. 被改了:如果后续维护代码时,路径有了变更,那么这里的代码同样没有提示,只有到实际运行时才会暴露错误
  2. query:只有有限的类型约束,与业务类型并不一致
    1. 比如不支持Boolean类型,必须强制转换为String类型

2. 获取参数

const route = useRoute();
const id = parseInt(route.query.id ?? 0);
const name = route.query.name ?? '';
const married = route.query.married === 'true' ? true : false;

由于没有提供类型工具,需要针对每一个参数单独处理

Composable:useRouteQuery

1. 访问页面

(同上)

2. 获取参数

import { useRouteQuery } from '@vueuse/router';

const id = useRouteQuery('id', 0, { transform: Number });
const name = useRouteQuery('name', '');
const married = useRouteQuery('married', 'false', {
transform: value => {
return value === 'true' ? true : false;
},
});

IOC容器

1. 定义类型

import { zz } from 'zova';

export const QuerySchema = zz.object({
+ id: zz.number().default(0),
+ name: zz.string().default(''),
+ married: zz.boolean().default(false),
});
  • zz是在zod基础上做的加强版,特别针对路由参数做了处理,支持array数组和json对象,具体参见:Zova: zod
  • 在定义类型的同时可以指定缺省值

2. 访问页面

const url = this.$router.resolvePath('/test/demo/user', {
id: 0,
name: 'kevin',
married: false,
});
this.$router.push(url);
  • resolvePath的参数都有类型约束和智能提示,并且与业务类型保持一致

3. 获取参数

const id = this.$query.id;
const name = this.$query.name;
const married = this.$query.married;
  • 直接通过this.$query获取参数值,有明确的类型,并且不需要处理缺省值

总结

从上面的示例对比可以看出,采用IOC容器,可以实现定义使用的分离,而且定义侧可以通过工具来创建脚手架,进一步简化定义的书写。由于TS类型和缺省值等规范性代码都在定义侧完成了,那么在使用侧代码就更加简洁直观了。不知您的代码风格偏好是什么,是否还有更好的表达方式,欢迎在评论区交流。

参考资料

在Vue3中如何为路由Query参数标注类型的更多相关文章

  1. react 中刷新,路由传参数丢失不存在了?

    你可能在Link to没写state {{pathname:'/report',state:{storageClear:this.state.storageClear}}}

  2. 接口测试中,数据驱动时,参数各类型,空或None的处理

    天天说接口测试,天天说数据驱动,但网上的各种教程太烂,遇到实际情况就傻眼了. 来来来,我们看一个例子 假设,有下面这样一个接口,获取用户信息,可以带的参数如下: 用户名(uname) str(),非必 ...

  3. C#调用SQL中的存储过程中有output参数,存储过程执行过程中返回信息

      C#调用SQL中的存储过程中有output参数,类型是字符型的时候一定要指定参数的长度.不然获取到的结果总是只有第一字符.本人就是由于这个原因,折腾了很久.在此记录一下,供大家以后参考! 例如: ...

  4. vue嵌套路由-query传递参数(三)

    在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <div id="app"> &l ...

  5. 路由的query参数(传参)

    路由组件不会在组件里面放自己组件标签. 案例使用嵌套组件的,但是在Message组件下新增了组件Detail.vue index.html //引入bootstrap.css <link rel ...

  6. Angular2学习笔记——在子组件中拿到路由参数

    工作中碰到的问题,特此记录一下. Angular2中允许我们以`path\:id\childPath`的形式来定义路由,比如: export const appRoutes: RouterConfig ...

  7. Vue通过路由 query传递参数

    父组件通过query来传递num参数为1,相当与在 url 地址后面拼接参数 <template> <div> <h3>首页</h3> <rout ...

  8. vue.js中路由传递参数

    知识点:vue路由传递参数,第二个页面(A.B页面)拿到参数,使用参数 方法一:使用 <router-link :to="{name:'edithospital',params:{hi ...

  9. Laravel路由中不固定数量的参数如何实现?

    前言 laravel是个好框架,我也在学习和使用,并且在公司里推广,最近在读 Laravel 源码的时候,发现了一个段特别有趣的代码,大家请看: ... 这三个点是做什么用的呢?我查了 PHP 的手册 ...

  10. VUE路由携带参数的三种方式

    vue 通过路由在进行页面跳转时,会经常携带参数用于同步页面间的数据 路由中携带参数的方式总结如下: 路由定义示例: { name: 'list', path: '/list', component: ...

随机推荐

  1. 增补博客 第二十三篇 python 对比Python中的列表、元组、字典、集合、字符串等之间异同

    1. 列表(List): - 异同:列表是可变(Mutable)的有序容器,使用方括号 [] 定义,可以存储任意类型的元素.可以通过索引访问和修改列表中的元素.列表支持切片操作和列表推导式. - 相同 ...

  2. (要做的事情)利用MNIST识别自己创建的手写数据

    (要做的事情)利用MNIST识别自己创建的手写数据 看懂MNIST 进阶教程,了解CNN

  3. OpenFOAM v2306 安装

    参考 https://develop.openfoam.com/Development/openfoam/-/wikis/precompiled/debian curl https://dl.open ...

  4. Excel插件之连接数据数据库秒数处理,办公轻松化

    接上文,对excel连接数据库需求的进一步优化: Excel 更改数据同步更新到Mysql数据库 1.通过mysql for excel 插件的思路,了解到一个新的插件 sqlcel,通过这个插件ex ...

  5. Vue2 整理(二):核心篇(组件化开发)

    前言 上一篇连接:vue2 整理:基础篇. 组件化开发 组件概念 组件,对于学Java的人来说的话,这个词所要表达的意思再熟悉不过了. 所谓组件就是:面向对象中的抽象.封装思想:而所谓的组件化就是:把 ...

  6. VulnHub_DC-3渗透流程

    VulnHub_DC-3 DC-3 是另一个特意建造的易受攻击的实验室,旨在获得渗透测试领域的经验. 与之前的 DC 版本一样,这个版本是为初学者设计的,尽管这一次只有一个flag.一个入口点并且根本 ...

  7. Apache Kyuubi 在B站大数据场景下的应用实践

    01 背景介绍 近几年随着B站业务高速发展,数据量不断增加,离线计算集群规模从最初的两百台发展到目前近万台,从单机房发展到多机房架构.在离线计算引擎上目前我们主要使用Spark.Presto.Hive ...

  8. Linux自己制作rpm包

    制作rpm包 由源码包---->rpm包 安装制作rpm包工具包rpm-build 在制作过程中需要源码包和配置文件 rpmbuild制作rpm包的原理: 1.首先rpmbuild会先将源码包进 ...

  9. 数据仓库建模工具之一——Hive学习第二天

    Hive的概述 1.Hive基本概念 1.1 Hive简介 Hive本质是将SQL转换为MapReduce的任务进行运算,底层由HDFS来提供数据存储,说白了hive可以理解为一个将SQL转换为Map ...

  10. PositiveSmallIntegerField、SmallIntegerField和IntegerField

    当您在Django中定义模型时,有几种不同的整数字段类型可供选择,包括PositiveSmallIntegerField.SmallIntegerField和IntegerField.以下是这三种整数 ...