Muatkan data Firestore dalam komponen sebelum membuat dengan Vuefire

Question

Saya cuba mengisi jadual orang dengan nama dan gambar profil. Nama itu diperoleh daripada pangkalan data Firestore dan digunakan oleh imej untuk mencari imej yang berkaitan dalam baldi Firebase.

Saya telah menonton video berjam-jam dan telah meneliti hampir seratus artikel jadi kod contoh saya mengandungi coretan setiap kod kerana saya telah mencuba setiap gabungan dan mendapat gabungan tetapi bukan keputusan yang Berjaya.

Dalam keadaan semasa yang mengembalikan ralat minimum, saya berjaya mengisi jadual dengan nama, namun dalam komponen yang sama ia gagal mengeluarkan gambar profil. Nilai yang digunakan untuk gambar profil telah dikemas kini, tetapi ia telah dikemas kini daripada nilai pemegang tempat kepada undefined.

GamePlanner.vue

import { computed, onErrorCaptured, ref } daripada "vue";
import { useFirestore, useCollection } daripada "vuefire";
import { koleksi } daripada "firebase/firestore";
import { Player, Inning } daripada "@/definitions/GamePlanner";
import PlayerRow daripada "./PlayerRow.vue";

const db = useFirestore();
const gamePlanID = "O278vlB9Xx39vkZvIsdP";

// const players = useCollection(collection(db, `/gameplans/${gamePlanID}/participants`));

// const players = ref(useCollection(collection(db, `/gameplans/${gamePlanID}/participants`)));

// Ralat tidak dikendalikan semasa melaksanakan flush penjadual
// Tidak ditangkap (dalam janji) DOMException: Gagal melaksanakan 'insertBefore' pada 'Nod': Nod sebelum nod baharu hendak dimasukkan bukanlah anak nod ini.
pemain const = ref(); 
players.value = useCollection(collection(db, `/gameplans/${gamePlanID}/participants`));

// Gelung yang kelihatan tidak terhingga dengan "onServerPrefetch dipanggil apabila tiada contoh komponen aktif untuk dikaitkan."
// Memberikan 5 (??) pemain yang tidak ditentukan
// Satu ralat ditunjukkan: Uncaught (dalam janji) TypeError: Tidak dapat membaca sifat undefined (membaca 'substring')
// const players = computed(() => useCollection(collection(db, `/gameplans/${gamePlanID}/participants`)));

// onErrorCaptured((ralat, vm, maklumat) => {
// console.log("Ralat memuatkan komponen Ringkasan: ", ralat, "vm: ", vm, "maklumat: ", info);
// ralat lontaran;
// });


PlayerRow.vue



import { ref, PropType, computed, onMounted, watch } daripada "vue";
import { useFirebaseStorage, useStorageFileUrl } daripada "vuefire";
import { ref sebagai storageRef } daripada 'firebase/storage';
import { Player, Inning } daripada "@/definitions/GamePlanner";

const fs = useFirebaseStorage();
const props = defineProps({
    'player': { type: Object as PropType, required: true },
    // 'inning': Array
});
const player2 = ref(props.player);

// const innings = dikira(() => props.innings);

// const playerPictureURL = dikira(() => {
// const playerPictureFilename = `${player2.value.firstName.substring(0,1)}${player2.value.lastName}.png`.toLowerCase();
// const playerPictureResource = storageRef(fs, `playerPictures/${playerPictureFilename}`);
// return useStorageFileUrl(playerPictureResource).url.value sebagai rentetan;
// });
// const playerPictureURL = ref(() => {
// const playerPictureFilename = `${player2.value.firstName.substring(0,1)}${player2.value.lastName}.png`.toLowerCase();
// const playerPictureResource = storageRef(fs, `playerPictures/${playerPictureFilename}`);
// return useStorageFileUrl(playerPictureResource).url.value sebagai rentetan;
// });

const playerPictureURL = ref("https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50");
fungsi async getPlayerPictureURL() {
    console.log("PlayerRow.ts getPlayerPictureURL");
    const playerPictureFilename = `${player2.value.firstName.substring(0,1)}${player2.value.lastName}.png`.toLowerCase();
    const playerPictureResource = menunggu storageRef(fs, `playerPictures/${playerPictureFilename}`);
    playerPictureURL.value = menunggu useStorageFileUrl(playerPictureResource).url.value sebagai rentetan;
}
onMounted(() => {
    console.log("PlayerRow.ts onMounted");
    getPlayerPictureURL();
});
tonton(playerPictureURL, (newVal, oldVal) => {
    console.log("PlayerRow.ts tonton playerPictureURL");
    console.log("newVal: " + newVal);
    console.log("oldVal: " + oldVal);
});


我的印象是  需要包装  组件，因为我正在使用 storageRef 和 < kod>useStorageUrl 方法，但它似乎引入了更多问题。根据 vuefire 文档并检查代码本身的定义，它们乼的它们乼的它们乼的它们伯试立即调用它们不会产生立即/实际结果。
相关软件包版本
{
    "vue": "^3.2.45"
    "firebase": "^9.15.0",
    "skrip taip": "^4.9.3",
    "undangan": "^4.0.0",
    "vue-router": "^4.1.6",
    "vue-tsc": "^1.0.11",
    "vuefire": "3.0.0-beta.6"
}
            

Answer 1

Mengikut dokumentasi ini kita harus menggunakan useCollection 包含 collection sebagai parameter seperti ini:

const todos = useCollection(collection(db, `/gameplans/${gamePlanID}/participants`))

Saya nampak anda menggunakannya dengan cara yang betul, tetapi anda boleh menetapkannya terus kepada nilai objek players 变量，而不是分配给 ref 。当您尝试使用此反应式对象作为 ref, yang tidak disokong.

Anda boleh menyelesaikan masalah anda dengan menukar talian ini:

const players = ref(); 
players.value = useCollection(collection(db, `/gameplans/${gamePlanID}/participants`));

Kepada:

const players = useCollection(collection(db, `/gameplans/${gamePlanID}/participants`));

Untuk maklumat lanjut tentang topik ini, anda boleh menyemak imbas dokumen

berikut