将 ref 存储在 ref 中会失去反应性

Question

我在使用另一个裁判中的裁判时遇到了一些问题。每当我想访问嵌套引用时，我只需取回值而不是实际的反应变量。

实际用例涉及 Pinia 商店，但我设法将其简化为基本部分。 这是一个说明问题的Playground。

function useBar() {
  const source = ref<number>(42);
  return { source }
}

function useFoo() {
  const data = ref<Record<string, ReturnType<typeof useBar>>>({});
  data.value['test'] = useBar();

  function getSourceType() {
    return typeof data.value['test'].source;
  }

  return { getSourceType, data }
}

现在每当我调用 getSourceType 时，它都不会返回

object

，而是返回

number

。当访问

data.value['test'].source

时，所有反应性都消失了。

根据这个问题中的评论，我还尝试使用reactive而不是ref，这并没有改变行为。

我在这里缺少什么？

Answer 1

感谢 Estus Flask 为我指明了正确的方向。如果 ref 位于 ref 内部并且您访问它，它将自动解包。请参阅文档此处。

在我的用例中，我只需将数据属性设置为常规对象而不是引用。这样，数据条目在访问时不会解开，并且表现得像引用（或计算）。

function useBar() {
  const source = ref<number>(42);
  return { source }
}

function useFoo() {
  const data: Record<string, ReturnType<typeof useBar>> = {};
  data['test'] = useBar();

  function getSourceType() {
    return typeof data['test'].source;
  }

  return { getSourceType, data }
}