Javascript 如何将异步js与vuex存储结合起来？

所以我一直在尝试“登录”我的vue应用程序。用户通过单击按钮并运行以下方法登录：

async signIn() {
      this.getfireBaseData(await this.authenticate());
    },

以下是前一种方法中使用的两种方法：

    async authenticate() {
      auth
        .signInWithPopup(provider)
        .then((result) =>
          this.$store.commit("setUserData", {
            email: result.additionalUserInfo.profile.email,
            picture: result.additionalUserInfo.profile.picture,
            name: result.additionalUserInfo.profile.name,
          })
        )
        .catch((err) => console.log(err.message));
      return this.$store.state.userData;
    },
    async getfireBaseData(x) {
      db.collection("rooms")
        .get()
        .then((snapshot) => {
          this.firebaseData = snapshot.docs.map((doc) => ({
            id: doc.id,
            data: doc.data(),
          }));
          console.log(x);
          if (x) {
            this.$router.push(`/rooms/${this.firebaseData[0].id}`);
          }
        });
    },

商店：

state: {
    userData: null,
  },
  mutations: {
    setUserData(state, payload) {
      state.userData = payload;
    },
  }

---

我希望它在authenticate（）解析其承诺后立即运行getfireBaseData。出于某种原因，当我第一次运行代码时，authenticate（）给我留下了fullfieldpromise，值为“null”——存储中的值。似乎authenticate（）确实修改了存储值，但在我立即运行它时不会返回它。有什么办法可以解决这个问题吗？

这是因为您直接从authenticate（）返回存储数据，而不是从承诺链返回。 因此，您没有等待auth.signInWithPopup，而是直接解析存储的当前值

尝试直接返回auth.signInWithPopup（提供程序），并在捕获后从resolve回调或通过其他“then”返回用户数据

但是将async/await与.then.catch混合使用可能不是一个好主意。

---

它很容易出错。

使用

await auth（）…..

和

await db.collection….

等待asyc代码完成，所以我所做的唯一一件事就是在auth.sign之前添加wait。。。。。。它成功了。谢谢