请教一个 vue3 中 ref 的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 957 天前的主题，其中的信息可能已经有所发展或是发生改变。

我有一个自定义的数据类型

export interface ICategoryFormData {
    id: number;
    cate_name: string;
    parent_id: number;
}

在页面中有一个变量formData

import { ref } from 'vue';

const formData = ref();

再我在我想给 formData 一个ICategoryFormData类型的默认值应该怎么做？能想到的一个方法就是这样

const data :ICategoryFormData={
	id:0,
	cate_name:'',
	parent_id:0,
}
const formData = ref<ICategoryFormData>(data);

现在问题来了，我不想每次都初始化一个data变量,如果ICategoryFormData中字段特别多，那么我就要手写很多，很多，所以我想问下，有没有什么更简洁的方法不用初始化ICategoryFormData就能给定formData 一个默认值呢？

14 条回复 • 2022-08-28 15:07:20 +08:00

noe132

2022-04-30 09:04:46 +08:00 via Android

const categoryFormDataRef = (data = {
id:0,
cate_name:'',
parent_id:0,
}) => ref(data)

const formData = categoryFormDataRef()

sunmoon1983

2022-04-30 10:12:52 +08:00

@noe132 你这还查初始化呀！每个字段都要赋一遍值

shakukansp

2022-04-30 11:04:01 +08:00

ts 并不能对运行时造成影响
你去掉 ts 怎么给它默认值，加上 ts 就还是怎么给，只是多了类型

doommm

2022-04-30 11:08:23 +08:00

没太懂。写一个工厂函数，返回一个 ICategoryFormData 类型的默认值，然后用到的地方调用一下就行了？或者写一个实现 ICategoryFormData 接口的 class ，但本质上是一样的，初始化的值需要你至少手写一次

Bingchunmoli

2022-04-30 11:09:46 +08:00 via Android

声明 interface 然后 export

wleven

2022-04-30 11:10:33 +08:00

const formData = ref<ICategoryFormData | undefined>()
调用的时候用可选链 formData?.id

thinkershare

2022-04-30 11:35:41 +08:00

编译器没有获取足够的信息, 并不知道自动给你填充足够的类型.
实在想跳过去可以这么做: ref({} as unknow as ICategoryFormData)

molvqingtai

2022-04-30 12:30:34 +08:00 via Android

codingguy

2022-04-30 14:57:40 +08:00

const formData = ref<Partial<ICategoryFormData>>({ })
提交时候
const values = formData.value as ICategoryFormData

7gugu

2022-04-30 20:53:43 +08:00 via iPhone

用 partial 套一下？

tedding

2022-05-01 00:36:46 +08:00 via iPhone

typescript 建议不要在 interface 命名使用前缀 I ，对于 ICategoryFormData 可以声明一个 class 代替，用的时候实例化这个 class 来初始化你需要赋值的变量。class 可以代替 interface 表示变量的类型使用。

Biwood

2022-05-01 13:38:12 +08:00 via Android

写类型的同时写一个常量用于保存默认值，如

export const DEFAULT_CATEGORY_DATA: ICategoryFormData = {
...
}

使用的时候直接 import 过来，用展开符或者 cloneDeep 函数复制一份即可

const formData = ref<ICategoryFormData>({ ...DEFAULT_CATEGORY_DATA })

可以不用每次都写一遍

Zzzz77

2022-05-01 18:08:18 +08:00

定义类型的时候 export 一个默认值出去，其他地方都 import 它就好了啊，再怎么样肯定也要手写一次呀

chenjiangui998

2022-08-28 15:07:20 +08:00

直接
```
const formData = ref<ICategoryFormData>(); // 实际是可选类型, 编译也是可选类型

const formData = ref({} as ICategoryFormData); //实际是可选的, 编译是 ICategoryFormData
```