Estoy siguiendo el tutorial de Net Ninja sobre las funciones de la nube de firebase y no sé cómo llamar a una función desde un componente vue. (él no usa vue en el tutorial).
Así que tengo esta aplicación vue3 con funciones de base de fuego instaladas. ¿Cómo importo las funciones a un componente? No encuentro la respuesta por ningún lado. Todavía estoy aprendiendo a codificar y todavía no entiendo muy bien cómo importar los paquetes necesarios.
Tengo un archivo index.js en la carpeta de funciones con algunas funciones dentro. Ahora quiero llamar a uno de ellos (una función .onCall) al hacer clic en un botón en un componente.
Entiendo que necesito importar algo en ese componente, ¡pero no puedo entender qué!
Su aplicación Vue.js y sus funciones en la nube para Firebase son componentes totalmente diferentes de toda su aplicación.
La aplicación Vue.js es un componente frontal (incluso si está alojado en un servicio en la nube como Firebase Hosting).
Las funciones de la nube son componentes de back-end sin servicio, alojados en la infraestructura de Firebase (Google Cloud) y que reaccionan a los eventos.
Para que estos dos componentes interactúen entre sí, existen básicamente dos posibilidades:
¿Cómo importo las funciones a un componente?
Como se explicó anteriormente, no puede integrar un código de Cloud Function en su código Vue.js. En particular, no puede "importar las funciones a un componente".
Ahora quiero llamar a uno de ellos (una función .
onCall()) al hacer clic en un botón en un componente.
Si su Cloud Function es invocable, puede llamarla a través del JS SDK como se explica en la documentación .
ACTUALIZAR Siguiendo tu comentario:
Como se explica en la documentación , para llamar a la función invocable desde su aplicación Vue.js, debe hacer lo siguiente (con JS SDK v9):
Agregue Firebase a su aplicación Vue.js. Por ejemplo, a través de un archivo firebaseConfig.js :
import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; import { getFunctions } from "firebase/functions"; const firebaseConfig = { apiKey: "...", // .... }; const firebaseApp = initializeApp(firebaseConfig); const db = getFirestore(firebaseApp); const functions = getFunctions(firebaseApp); export { db, functions };Entonces, en tu componente, haces
<script> import { functions } from '../firebaseConfig'; import { httpsCallable } from 'firebase/functions'; // ... methods: { async callFunction() { const addMessage = httpsCallable(functions, 'addMessage'); const result = await addMessage({ text: messageText }) const data = result.data; //... }); } </script>