如何在ve3中调用Firebase的云函数

Question

我正在学习Net Ninja关于firebase云函数的教程，但我不知道如何从一个vue组件调用一个函数。(他在教程中没有使用vue)。

我有这个安装了firebase功能的vue3应用。如何将函数导入到组件中?我到处都找不到答案。我还在学习编程，而且我还不太明白如何导入所需的包。

我在函数文件夹中有一个index.js文件，里面有几个函数。现在我想在单击组件中的按钮时调用其中一个(. oncall函数)。

我知道我需要在那个组件中导入一些东西，但我不知道是什么!

Answer 1

你的Vue.js应用程序和你的Firebase Cloud Functions是你整个应用程序的完全不同的组件。

Vue.js应用是一个前端组件(即使它是托管在一个云服务，如Firebase Hosting)。

Cloud Functions是无服务器的后端组件，托管在Firebase (Google Cloud)基础设施上，并对事件做出反应。

要使这两个组件相互作用，基本上有两种可能性:

• 对于可调用的云函数和HTTPS云函数，你将从你的Vue.js应用程序调用它们。
• 对于后台触发的云函数(例如，由Firestore事件触发，如创建文档)，Vue.js前端可以生成事件(例如，写入Firestore)和/或监听云函数执行的结果(例如，修改Firestore文档)。

---

如何将函数导入到组件中?

如上所述，你不能在Vue.js代码中集成云函数代码。特别是你不能"将函数导入到组件中"。

我现在想调用其中一个(a。onCall()函数)，单击a按钮。

如果你的云函数是一个可调用的，你可以通过JS SDK调用它，在文档中解释。

---

更新您的评论:

如文档中所述，要从Vue.js应用程序调用Callable Function，您需要执行以下操作(使用JS SDK v9):

将Firebase添加到Vue.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>