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

Question

我是 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>

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

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

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

Answer 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>