调用 .value 时,Vue 的组合 API ref 包含数据返回 null

时间:2021-01-09 16:11:24

标签: vue.js vue-composition-api

我有一个可从 Firestore 实时获取和返回 ref 文档的组合。 ref 包含数据,但当我在 .value 中调用 setup() 时,返回 null。

可组合如下。

import { watchEffect, ref } from "vue";
import { projectFirestore } from "../firebase/config";

const getDocument = (collection, id) => {
  let document = ref(null);
  let error = ref(null);

  let documentRef = projectFirestore.collection(collection).doc(id);

  const unsub = documentRef.onSnapshot(
    doc => {
      if (doc.data()) {
        document.value = { ...doc.data(), id: doc.id };
        error.value = null;
      } else {
        error.value = "That document does not exist.";
      }
    },
    err => {
      console.log(err.message);
      error.value = "Problem fetching the document.";
    }
  );

  watchEffect(onInvalidate => {
    onInvalidate(() => unsub());
  });
  return { error, document };
};

export default getDocument;

当我转储此结果时,console.log(result),我在下面的捕获中得到输出,但 result.value 为空。

如何获取 setup() 中的值?

enter image description here

请注意,捕获是 console.log(result) & console.log(result.value) 的结果。

0 个答案:

没有答案