Scenerio Setup
Currently, I have developed a Vue3 + Firebase project which includes an object called userInfo in the main.ts file. The export declaration is as follows:
export var userInfo :any = {}
It is important to note that the
:anydeclaration is utilized to address Typescript error.*some-property* does note exist on type Object
Furthermore, a hook inside the main.ts file sets this object when a user is authenticated, as demonstrated by the code snippet below:
auth.onAuthStateChanged(async () => {
if(!auth.currentUser) return
userInfo = await getUserInfo()
})
However, it's worth mentioning that the object is only populated once the onAuthStateChanged hook is triggered, which occurs after imports are processed in the .vue files.
Identified Issue
The challenge arises when attempting to import the ´userInfo´ object in a .vue file using import {userInfo} from '@/main'. In this scenario, the file imports the empty object prior to the hook filling the object with data.
Consequently, even after the onAuthStateChanged hook completes and populates the object, the component does not automatically refresh the import, resulting in the absence of required data within the .vue file.
Key Inquiry
My desired approach involves centralizing the acquisition of the userInfo object, allowing me to simply import it into my .vue components rather than manually retrieving it each time it's needed.
How can I navigate through this challenge where the object is filled after imports have been processed?