Ссылка на композиционный API Vue содержит данные, возвращающие значение null при вызове .value

#vue.js #vue-composition-api

#vue.js #vue-composition-api

Вопрос:

У меня есть составной файл, который извлекает и возвращает ref документы в режиме реального времени из Firestore. 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()?

введите описание изображения здесь

Пожалуйста , обратите внимание , что захват является результатом console.log(result) amp; console.log(result.value) .