如何在 VueJS 3 中使用 9.0.1 Firebase 方法

Posted 2023-02-22

【中文标题】如何在 VueJS 3 中使用 9.0.1 Firebase 方法

【英文标题】：How to use 9.0.1 Firebase methods with VueJS 3

【发布时间】：2021-11-01 13:02:33

【问题描述】：

我是 Vue 的新手，这是我要学习的第二个教程，它将 firebase 后端与 Vue 集成。但是本教程使用的是 Vue 2 和旧版本的 firebase，所以我想我可以尝试使用 Vue 3 和新的 Firebase 版本。

firebase 9.0.1 上的资源至少在使用 Vue 实现方面似乎相当有限。这是我从有关signInAnonymously的firebase文档中找到的

import  getAuth, signInAnonymously  from "firebase/auth";

const auth = getAuth();
signInAnonymously(auth)
  .then(() => 
    // Signed in..
  )
  .catch((error) => 
    const errorCode = error.code;
    const errorMessage = error.message;
    // ...
  );

据我了解，firebase 9.0.1 是仅导入您使用的样式？所以如果我想使用 firebase/auth 中的 getAuth 和 signInAnonymously 方法，我会这样做

import  getAuth, signInAnonymously  from 'firebase/auth';

但我对如何使用 .Vue 文件中的方法有点困惑 所以我在 firebase.js 文件中所做的是

export const auth = getAuth();
export signInAnonymously;

然后在我的Login.vue 文件中，我做到了

import  auth, signInAnonymously  from '../firebase'

export default 
    data() 
        return  auth 
    ,
    methods: 
        signInAnonymously
    

我有一个按钮，点击后会触发signInAnonymously，它是这样写的

<button class="button" @click="signInAnonymously(auth)">Sign In</button>

我写的东西似乎有效，但我觉得它有点令人费解/困惑，想知道

我这样做是否正确，或者是否有更短/更简洁的方式来编写代码？ 如果我想修改signInAnonymously 方法，如firebase 文档中所示，即添加那些signInAnonymously(auth).then(() => )，会发生什么，因为如果我要在导出默认值中添加signInAnonymously 的参数，如下所示，它不将其识别为我的 firebase.js 文件中的导出方法？

export default 
 ...,
 methods: 
   signInAnonymously(auth) 
     ...
 

【参考方案1】：

尝试创建一个自定义方法并在其中使用signInAnonymously()，如下所示：

import  auth  from '../firebase'
import  signInAnonymously  from 'firebase/auth'
// can be imported directly in Login.vue ^^

export default 
  methods: 
    anonymousLogin() 
      // Directly pass 'auth' in this method
      signInAnonymously(auth)
        .then(() => 
          // Signed in..
        )
        .catch((error) => 
          const errorCode = error.code;
          const errorMessage = error.message;
          // ...
        );
    ,
  ,
;

然后在@click事件中使用这个自定义方法：

<button class="button" type="button" @click="anonymousLogin">Sign In</button>