我正在学习Net Ninja关于firebase云函数的教程,但我不知道如何从vue组件调用函数。(他在教程中没有使用vue)。所以我有这个vue 3应用程序与firebase功能安装在它。如何将函数导入到组件中?我到处都找不到答案。我还在学习编码,我仍然不太明白如何导入所需的包。我在functions文件夹中有一个index.js文件,里面有一些函数。我现在想在单击组件中的按钮时调用其中一个(一个.onCall函数)。我知道我需要在该组件中导入一些东西,但我不知道是什么!
cngwdvgl1#
你的Vue.js应用和你的Cloud Functions for Firebase是你整个应用的完全不同的组件。Vue.js应用是一个前端组件(即使它托管在Firebase Hosting等云服务中)。云函数是无服务的后端组件,托管在Firebase(Google Cloud)基础架构中,并对事件做出React。要使这两个组件相互作用,基本上有两种可能性:
如何将函数导入到组件中?如上所述,您不能在Vue.js代码中集成Cloud Function代码。特别是你不能“将函数导入到组件中”。我现在想把其中的一个叫做(A)。onCall()函数)。如果您的Cloud Function是Callable,您可以通过JS SDK调用它,如documentation中所述。
onCall()
更新您的评论:
如documentation中所述,要从Vue.js应用调用Callable Function,您需要执行以下操作(使用JS SDK v9):将Firebase添加到您的Vue.js应用。例如,通过firebaseConfig.js文件:
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 };
那么,在您的组件中,您需要
<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>
1条答案
按热度按时间cngwdvgl1#
你的Vue.js应用和你的Cloud Functions for Firebase是你整个应用的完全不同的组件。
Vue.js应用是一个前端组件(即使它托管在Firebase Hosting等云服务中)。
云函数是无服务的后端组件,托管在Firebase(Google Cloud)基础架构中,并对事件做出React。
要使这两个组件相互作用,基本上有两种可能性:
如何将函数导入到组件中?
如上所述,您不能在Vue.js代码中集成Cloud Function代码。特别是你不能“将函数导入到组件中”。
我现在想把其中的一个叫做(A)。
onCall()
函数)。如果您的Cloud Function是Callable,您可以通过JS SDK调用它,如documentation中所述。
更新您的评论:
如documentation中所述,要从Vue.js应用调用Callable Function,您需要执行以下操作(使用JS SDK v9):
将Firebase添加到您的Vue.js应用。例如,通过
firebaseConfig.js
文件:那么,在您的组件中,您需要