如何将Firebase 9 onAuthStateChanged用户对象存储在Vue ref中

Question

我在Vue 3/Quasar/TypeScript应用程序中使用Firebase 9。

这是我用来从Firebase:获得用户的getUser.ts组合

import { ref } from 'vue';
import { auth } from 'src/firebase/config';
import { User, onAuthStateChanged } from 'firebase/auth';
const user = ref<User | null>(auth.currentUser);
console.log('user.value in getUser', user.value); // <-- This returns null
onAuthStateChanged(auth, (_user) => {
user.value = _user;
console.log('user.value in getUser onAuthStateChanged', user.value); // <-- This returns a valid user object
});
const getUser = () => {
return { user };
};
export default getUser;

这是我的Pinia商店，名为user.ts:

import { defineStore } from 'pinia';
import { LocalStorage } from 'quasar';
import useUser from 'src/composables/useUser';
import getUser from 'src/composables/getUser';
import getDocument from 'src/composables/getDocument';
import { User } from 'src/types';
const { updateUserProfile } = useUser();
const { user } = getUser();
console.log('user.value in user store', user.value); // <-- This returns null
let userObject = {};
if (user.value) {
const { document: userDocument } = getDocument('users', user.value.uid);
userObject = {
firstName: userDocument.value?.firstName as string,
lastName: userDocument.value?.lastName as string,
displayName: user.value.displayName,
photoURL: user.value.photoURL,
email: user.value.email,
phoneNumber: user.value.phoneNumber,
uid: user.value.uid,
};
}
const useUserStore = defineStore('user', {
state: () => ({
user: (LocalStorage.getItem('user') || userObject) as User,
}),
actions: {
async setPhotoURL(photoURLData: string | undefined) {
await updateUserProfile({ photoURL: photoURLData });
this.user.photoURL = photoURLData;
},
setEmail(emailData: string) {
this.user.email = emailData;
},
setPhone(phoneNumberData: string) {
this.user.phoneNumber = phoneNumberData;
},
},
});
export default useUserStore;

onAuthStateChanged中的user.value正确地填充了Firebase用户对象。但是其他user.value引用总是返回null。

我做错了什么？

Answer 1

下面是一个如何将Firebase v9与Vue 3和TypeScript一起使用的好例子。Quasar与这个问题无关。

https://github.com/oless/firebase-v9-typescript-example