在带有类型记录的vue3中初始化没有值的反应性变量的最佳方法是什么？
在带有类型记录的vue3中初始化没有值的反应性变量的最佳方法是什么？
提问于 2022-06-09 02:53:16
我想初始化一个没有值的reactive变量。我试过：
const workspaceReact = reactive(null) // wrong! it is seems value null can not being passed to reactive()因此，我尝试了下面的代码，它似乎是有效的：
let workspaceReact:UnwrapRef<ToolboxInfo>;
workspaceReact = reactive(toolbox)但我觉得太复杂了。有什么更好的方法吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-06-10 04:53:23
一种解决方案是从reactive切换到ref，并在<script setup>中使用反应性变换，这将自动解锁ref。
要使用它，请将ref/computed替换为$ref/$computed (不需要导入)：
<script setup lang="ts">
import { onMounted } from 'vue'
type ToolboxInfo = {
name: string
id: string
counter: number
}
let workspaceReact = $ref<ToolboxInfo | null>(null)
let msg = $computed(() => `Hello ${workspaceReact?.name}!`)
const onClick = () => workspaceReact!!.counter++
onMounted(() => {
workspaceReact = {
id: 'my id',
name: 'my toolbox',
counter: 0,
}
})
</script>警告：和vue@3.2.37一样，这个特性仍然是实验性的：
⚠️实验特征 反应性变换是目前的一个实验特征。默认情况下，它是禁用的，并且需要显式选择。在最后定稿之前，它也可能发生变化。为了保持最新的状态，请密切关注它的关于GitHub的建议与探讨。
Stack Overflow用户
发布于 2022-06-09 04:19:25
这是不可能的reactive需要扩展对象https://vuejs.org/api/reactivity-core.html#reactive
反应性() 返回对象的反应性代理。 类型 功能反应性(目标: T)：UnwrapNestedRefs
你的选择是：
- 使用空对象
{}初始化 - 使用
ref
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72554224
复制相关文章
相似问题
腾讯云开发者
