Soy bastante nuevo en Vue y este es el segundo tutorial que estoy siguiendo, que integra el backend de firebase con Vue. Pero el tutorial usa Vue 2 y también una versión anterior de Firebase, así que pensé que podría intentar hacerlo con Vue 3 y la nueva versión de Firebase.

Los recursos en firebase 9.0.1 parecen ser bastante limitados con respecto a la implementación con Vue al menos. Esto es lo que encontré en la documentación de firebase con respecto a signInAnonymously

 import { getAuth, signInAnonymously } from "firebase/auth"; const auth = getAuth(); signInAnonymously(auth) .then(() => { // Signed in.. }) .catch((error) => { const errorCode = error.code; const errorMessage = error.message; // ... });

Por lo que entiendo, firebase 9.0.1 es una importación solo ¿qué estilo usas? entonces, si quiero usar los métodos getAuth y signInAnonymously de firebase/auth, lo haría

 import { getAuth, signInAnonymously } from 'firebase/auth';

Pero estoy un poco confundido sobre cómo usar los métodos en mi archivo .Vue, así que lo que hice en mi archivo firebase.js fue

 export const auth = getAuth(); export {signInAnonymously};

luego en mi archivo Login.vue , lo hice

 import { auth, signInAnonymously } from '../firebase' export default { data() { return { auth } }, methods: { signInAnonymously } }

y tengo un botón que cuando se hace clic activa signInAnonymously , que está escrito así

 <button class="button" @click="signInAnonymously(auth)">Sign In</button>

Lo que he escrito parece funcionar, pero lo encuentro un poco enrevesado/confuso y quiero saber

1. ¿Estoy haciendo esto correctamente o hay una forma más corta/más ordenada de escribir el código?
2. ¿Qué sucede si quiero modificar el método signInAnonymously como se muestra en la documentación de firebase, es decir, agregar esos signInAnonymously(auth).then(() => {}) , porque si tuviera que agregar los argumentos para signInAnonymously en mi valor predeterminado de exportación como a continuación, ¿no lo reconoce como el método exportado de mi archivo firebase.js ?

 export default { ..., methods: { signInAnonymously(auth) { ... } }