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

vuktfyat  于 2023-05-06  发布在  Node.js
关注(0)|答案(1)|浏览(253)

我正在学习Net Ninja关于firebase云函数的教程,但我不知道如何从vue组件调用函数。(他在教程中没有使用vue)。
所以我有这个vue 3应用程序与firebase功能安装在它。如何将函数导入到组件中?我到处都找不到答案。我还在学习编码,我仍然不太明白如何导入所需的包。
我在functions文件夹中有一个index.js文件,里面有一些函数。我现在想在单击组件中的按钮时调用其中一个(一个.onCall函数)。
我知道我需要在该组件中导入一些东西,但我不知道是什么!

cngwdvgl

cngwdvgl1#

你的Vue.js应用和你的Cloud Functions for Firebase是你整个应用的完全不同的组件。
Vue.js应用是一个前端组件(即使它托管在Firebase Hosting等云服务中)。
云函数是无服务的后端组件,托管在Firebase(Google Cloud)基础架构中,并对事件做出React。
要使这两个组件相互作用,基本上有两种可能性:

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

如何将函数导入到组件中?
如上所述,您不能在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文件:

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>

相关问题