快捷導(dǎo)航

在Vue3中為路由Query參數(shù)標(biāo)注類型的方法

更新時(shí)間：2024年08月06日 08:59:27 作者：濮水大叔

這篇文章主要介紹了在Vue3中如何為路由Query參數(shù)標(biāo)注類型,我們就針對這個(gè)話題如何為路由Query參數(shù)標(biāo)注類型為例,看看Composable和IOC容器的代碼風(fēng)格究竟有什么不同,需要的朋友可以參考下

前言

最近發(fā)布了一款支持IOC容器的Vue3框架：Zova。與以往的OOP或者Class方案不同，Zova在界面交互層面仍然采用Setup語法，僅僅在業(yè)務(wù)層面引入IOC容器。IOC容器猶如一把鑰匙，為我們打開了業(yè)務(wù)工程化的大門，允許我們探索更多工程化方面的設(shè)計(jì)和能力。有網(wǎng)友提出一個(gè)非常好的建議：可否提供一些業(yè)務(wù)場景，說明有哪些是Class可做而Composable做不了的，這樣才更有說服力。

首先說明一點(diǎn)，其實(shí)沒有哪些業(yè)務(wù)需求是這個(gè)能做而那個(gè)不能做的。不同的編程范式帶來的是不同的代碼風(fēng)格，不同的編程體驗(yàn)，從不同的路徑指向開發(fā)效率和代碼可維護(hù)性方面的評估。因此，最終根據(jù)用戶自身的偏好和業(yè)務(wù)實(shí)際需求而定。

那么，在這里，我們就針對這個(gè)話題如何為路由Query參數(shù)標(biāo)注類型為例，看看Composable和IOC容器的代碼風(fēng)格究竟有什么不同。

需求說明

這里有一個(gè)頁面組件User，可以通過Query傳遞三個(gè)參數(shù)：

參數(shù)名	類型	缺省值
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類型的角度來看，這段代碼有以下兩個(gè)問題：

path：沒有類型約束和智能提示。這會存在以下三個(gè)隱患：
記不住：如果路徑較長，或者單詞較復(fù)雜，就記不住路徑，需要從源文件查找

寫錯(cuò)了：如果不小心寫錯(cuò)了，沒有提示，只有到實(shí)際運(yùn)行時(shí)才會暴露錯(cuò)誤

被改了：如果后續(xù)維護(hù)代碼時(shí)，路徑有了變更，那么這里的代碼同樣沒有提示，只有到實(shí)際運(yùn)行時(shí)才會暴露錯(cuò)誤
query：只有有限的類型約束，與業(yè)務(wù)類型并不一致
比如不支持Boolean類型，必須強(qiáng)制轉(zhuǎn)換為String類型

2. 獲取參數(shù)

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

由于沒有提供類型工具，需要針對每一個(gè)參數(shù)單獨(dú)處理

Composable：useRouteQuery

1. 訪問頁面

（同上）

2. 獲取參數(shù)

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基礎(chǔ)上做的加強(qiáng)版，特別針對路由參數(shù)做了處理，支持array數(shù)組和json對象，具體參見：Zova: zod
在定義類型的同時(shí)可以指定缺省值

2. 訪問頁面

const url = this.$router.resolvePath('/test/demo/user', {
  id: 0,
  name: 'kevin',
  married: false,
});
this.$router.push(url);

resolvePath的參數(shù)都有類型約束和智能提示，并且與業(yè)務(wù)類型保持一致

3. 獲取參數(shù)

const id = this.$query.id;
const name = this.$query.name;
const married = this.$query.married;

直接通過this.$query獲取參數(shù)值，有明確的類型，并且不需要處理缺省值

總結(jié)

從上面的示例對比可以看出，采用IOC容器，可以實(shí)現(xiàn)定義與使用的分離，而且定義側(cè)可以通過工具來創(chuàng)建腳手架，進(jìn)一步簡化定義的書寫。由于TS類型和缺省值等規(guī)范性代碼都在定義側(cè)完成了，那么在使用側(cè)代碼就更加簡潔直觀了。不知您的代碼風(fēng)格偏好是什么，是否還有更好的表達(dá)方式，歡迎在評論區(qū)交流。