Mis amigos y yo estamos usando Vue con firestore para crear alguna funcionalidad. Esta es nuestra primera experiencia usando cualquiera y estamos teniendo algunos problemas. Ahora estamos tratando de agregar un onSnapshot a un documento en firestore y asignar dichos datos a una variable vue ref, lo que hace posible usar un observador y responder a los cambios.
Como se puede ver en la imagen, nuestro documento contiene 2 matrices, que son los datos a los que debemos llegar después de que onSnapshot haya observado un cambio. Nuestro problema es que no sabemos cómo asignar gameData a los datos apropiados para que podamos alcanzar y usar un observador fuera de la función. Estructura de datos en firestore
export function realTimeGame(lobbyId) { const gameCollection = firestore.collection('lobbies/' + lobbyId + '/game_data'); const gameData = ref([]); const unsubscribe = gameCollection.doc('gameThings').onSnapshot(snapshot => { // gameData.value = snapshot.map(document => ({ id: document.id, ...document.data() })) .map is not defined gameData.value = snapshot; //this is essentially what we want to do }); onUnmounted(unsubscribe) return { gameData } }Encontramos una solución:
export function realTimeGame(lobbyId) { const gameData = ref(); const unsub = onSnapshot(doc(firestore,'lobbies/' + lobbyId + '/game_data/gameThings'),(doc) => { gameData.value = { ...doc.data()} }) onUnmounted(unsub) return gameData }