firebase - 在 Vue.js 中使用 Firebase auth/login 时，Firebase 的回调如何在 Vue 应用程序中设置数据？

Question

我正在使用 Firebase 进行登录。我还在 VueFire 中使用 Vue.js。如果我使用 firebase.auth().onAuthStateChanged( onUserLogin ); 调用，我不确定如何将 onUserLogin 的结果获取到 vue 应用程序的数据中。我尝试创建一个“全局”变量(称为 email)，然后像这样将其映射到数据中，但它没有显示在我的模板中 {{ email }} .也许我需要在创建 Vue 应用程序时在我的 methods 属性中设置 onUserLogin？或者，我应该以某种方式在 Firebase 属性中使用 user(这会自动与登录相关联吗？)

var onUserLogin = function(user) {
  if (user) {
    email = user.email;
    console.log( "email", email );
  }
}

var email;

new Vue( {
  el: "#app",
  data: {
    email: email
  },
  firebase: {} // Is something supposed to be here?
  methods: {
    loginToFirebase: function() {
      if (!firebase.auth().currentUser) {
        var provider = new firebase.auth.GithubAuthProvider();
        firebase.auth().signInWithPopup( provider ).then( afterSignIn ).catch( signInError );
      } else {
        firebase.auth().signOut();
      }
    },
  }
});

firebase.auth().onAuthStateChanged( onUserLogin );

我的 HTML 看起来像这样(基本上，只是一个调用 loginToFirebase 的按钮):

<div id="app">
<button v-on:click="loginToFirebase">Login</button>

Email: {{ email }}

<script src="https://www.gstatic.com/firebasejs/3.5.3/firebase.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuefire/dist/vuefire.js"></script>
<script src="firebase-init.js"></script>
<script src="script.js"></script>
</div>

Answer 1

答案是将 firebase.auth().onAuthStateChanged( onUserLogin ); 放在挂载的钩子(Hook)中:

new Vue( {
  mounted: function() {
    firebase.auth().onAuthStateChanged( this.onUserLogin );
  },
  data: {
    user: undefined
  }
  methods: { 
    onUserLogin: function( user ) {
      this.user = user;
    }
  }
  el: "#app"
})