如何使用MVVM架构实现Firebase Google SignIn？

// 模型
class UserModel {
  constructor() {
    // 初始化Firebase身份验证服务
    this.auth = firebase.auth();
  }

  // 登录操作
  signIn() {
    const provider = new firebase.auth.GoogleAuthProvider();
    return this.auth.signInWithPopup(provider);
  }

  // 注销操作
  signOut() {
    return this.auth.signOut();
  }

  // 获取当前用户信息
  getUserInfo() {
    return this.auth.currentUser;
  }
}

// 视图模型
class UserViewModel {
  constructor(userModel) {
    this.userModel = userModel;
    this.currentUser = ko.observable(null); // 使用Knockout.js库进行数据绑定
  }

  // 登录操作
  signIn() {
    this.userModel.signIn()
      .then(user => this.currentUser(user))
      .catch(error => console.log(error));
  }

  // 注销操作
  signOut() {
    this.userModel.signOut()
      .then(() => this.currentUser(null))
      .catch(error => console.log(error));
  }

  // 监听身份验证状态变化
  watchAuthState() {
    this.userModel.auth.onAuthStateChanged(user => {
      if (user) {
        this.currentUser(user);
      } else {
        this.currentUser(null);
      }
    });
  }
}

// 视图
const app = new Vue({
  el: '#app',
  data: {
    userViewModel: null
  },
  mounted() {
    const userModel = new UserModel();
    const userViewModel = new UserViewModel(userModel);
    userViewModel.watchAuthState();
    this.userViewModel = userViewModel;
  }
});