vue3+ts reactive自动解包ref 后再次赋值ts总是提示类型错误？

Z时代
2024-02-14
分类：IT

  const a = ref(1)
  const b = reactive({
    a
  })
  b.a=2 //这行会提示不能将类型“number”分配给类型“Ref<number>”。ts(2322)
         // const b: {
         //   a: globalThis.Ref<number>;         //}

回答：

方法一：
const a = ref(1);
const b = reactive({
  a: a.value // 将`a`的值赋给`b.a`，而不是`ref`本身
});
b.a = 2; // 现在你可以直接向`b.a`赋新值
方法二：
const a = ref(1);
const b = reactive({
  a: computed({
    get: () => a.value,
    set: val => a.value = val
  })
});
b.a = 2; // 这将同时修改 `b.a` 和 `a.value`