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

Question

我正在关注 Net Ninja 关于 firebase 云函数的教程，但我不知道如何从 vue 组件调用函数。（他在教程中没有使用 vue）。

所以我有这个 vue3 应用程序，其中安装了 firebase 功能。如何将函数导入到组件中？我在任何地方都找不到答案。我仍在学习编码，但我仍然不太了解如何导入所需的包。

我在functions文件夹中有一个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文档已修改）。

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

如上所述，您无法将 Cloud Function 代码集成到 Vue.js 代码中。特别是你不能“将函数导入到组件中”。

我现在想onCall()在单击组件中的按钮时调用其中一个（. 函数）。

如果您的云函数是Callable云函数，您可以按照文档中的说明通过JS SDK调用它。

根据您的评论更新：

如文档中所述，要从 Vue.js 应用程序调用可调用函数，您需要执行以下操作（使用 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>