How to properly wait to VueFire to retrieving the data inside Pinia store before using it?

[obedi123]

I'm having problems to change my website's title and favicon URL for the ones I bring from Firestore because the variables get assigned before the data is retrieved. The template render the data just fine when it arrives, but in the case of variables, apparently they don't get reassigned when the data loads eventually.

Store:

import { defineStore } from 'pinia';
import { useFirestore, useDocument } from 'vuefire';
import { doc } from 'firebase/firestore';
import { useRoute } from 'vue-router';

export const usePlaceStore = defineStore('PlaceStore', () => {
    const route = useRoute();
    const db = useFirestore();

    const placeInfo = useDocument(() => doc(db, 'places', route.params.placeName), { once: true });

    return { placeInfo };
});

Component:

<template>
    <div class="place" v-if="placeStore.placeInfo">
        <h1>{{ placeStore.placeInfo.placeName }}</h1>
    </div>
</template>

<script setup>
import { usePlaceStore } from '@/stores/PlaceStore';
const placeStore = usePlaceStore();

const favicon = document.querySelector("link[rel~='icon']");

favicon.href = placeStore.placeInfo?.placeFaviconUrl;  // <--- These just render undefined
document.title = placeStore.placeInfo?.placeTitle;  // <----
</script>

So, my question is what's the right way to wait for data to load before assigning the value to the variables?

[sugoidesune]

You watch for the values to change.

watch(placeStore.placeInfo, (new_value)=>{
favicon.href = new_value.placeFaviconUrl
})

https://vuejs.org/guide/essentials/watchers.html

Or you introduce a promise you can await

await placeStoreReady
favicon.href = placeStore.placeInfo?.placeFaviconUrl;

[sugoidesune]

But I agree that this is not optimal as I asked the same question. We really didn't need to create a worse await syntax with watch.
Especially since not all data manipulation is done inside components.
#1528