如何将用户信息获取到 vue.js 中应用程序的 "data" 部分？

Question

您知道如何将 user 设置为 currentUser 吗？我正在使用 vuefire 和 firebase。 user.uid 返回未定义。

 <td v-if="(building['key'] && building['key'].child('ownerId')) == user.uid">
            <p >{{building['.key']}} + {{user.uid}}</p>
</td>

这是我的其余代码：

import firebase,{ db, usersRef, buildingsRef } from '../firebase-config';
import { store } from '../store/store';

export default {

  firebase() { 
    // from my understanding this just gives me a quick access to the Refs and a short nomenclature
    return { 
    users: usersRef,  
    buildings: buildingsRef, 
    }
  },
  name: 'buildings',
  data () {
    return {
      user: "",
      building: {
        name: '',
        address: '',
        comments: '',
        ownerId: '',
      },
    }
  },

我正在尝试通过 beforeCreate 挂钩中的商店来完成此操作：

  beforeCreate () {
       this.$store.dispatch('setUser');
       let user = this.$store.getters.getUser;
       console.log(user); // this works!!!
      this.$set(this.user, 'uid', user.uid )
  }   
},

如果我改为在 create hook 中设置 user：

  created () {
       this.$store.dispatch('setUser');
       let user = this.$store.getters.getUser;
       console.log(user); // this works!!!
      this.$set(this.user, 'uid', user.uid )
    }

我收到这个错误：

Answer 1

在 Vue 中，状态（又名 data 属性）是 initialized between the beforeCreate and created 钩子。

因此，您在 beforeCreate 中对 data 所做的任何更改都会丢失。

将您的挂钩更改为 created

created() {                         // changed this line
  this.$store.dispatch('setUser');
  let user = this.$store.getters.getUser;
  console.log(user); // this works!!!
  this.$set(this.user, 'uid', user.uid)
}

如何将用户信息获取到 vue.js 中应用程序的 "data" 部分？

How to get the user info to the "data" part of the app in vue.js?

firebase

vue.js

vuefire