Ref＜XXX＞的使用

使用Ref创建响应式变量

interface XXX {  
	name: string
	age: number
}

// 使用 Ref<XXX> 创建一个响应式变量  
const myVariable: Ref<XXX> = ref({ name: 'John', age: 30 })
console.log('myVariable=', myVariable.value)

解构的时候使用Ref

userInfo 是通过解构赋值从 storeToRefs(userStore) 中获取的，

可以在解构赋值时显式地指定 userInfo 的类型，以帮助 TypeScript 正确推断属性，如下：

interface UserInfo {
  userName?: string
  // 其他属性...
}

// 假设 userStore 的类型是 UserStore
const { userInfo }: { userInfo: Ref<UserInfo> } = storeToRefs(userStore)

// 然后使用可选链操作符来访问 userName 属性
searchParams.value.userName = userInfo.value?.userName

在解构赋值时显式地指定了 userInfo 的类型为 { userInfo: Ref<UserInfo> }，

并使用 Ref<UserInfo> 来声明 userInfo 的类型，

然后，我们使用可选链操作符来访问 userName 属性，

补充

Ref<UserInfo>是用来定义一个响应式引用的类型，其中 UserInfo 是引用的数据类型。

Ref是用来创建响应式数据的类型，通过Ref，你可以创建一个变量，这个变量的值是 UserInfo 类型，并且这个变量是响应式的。

userInfo 是一个 Ref<UserInfo> 类型的变量，你可以通过 userInfo.value 来访问或修改其内部的值，

由于 userInfo 是响应式的，任何对 userInfo.value 的更改都会触发视图的更新。

简而言之，Ref<UserInfo> 用于定义一个类型为 UserInfo 的响应式引用变量。