VUE - 火力基地 |如何从实时数据库中获取用户配置文件

Question

我从实时数据库中获得了用户配置文件，但是当我拥有超过 1 个帐户时，我也会获得第二个用户配置文件。

您可以在下面看到来自 2 个用户的数据。但我想获取登录用户，即 currentUser

ID 是 currentUser

这是实时数据库：

这是我的 Profile.vue 页面：

          <div class="container" v-for="profileData of profile" :key="profileData['.key']">
            <div v-if="seen" class="row">
              <div class="col">
                <div class="card card-border" style="width: 30rem;">
                  <div class="card-body">
                    <h4 class="card-title text-center mb-4">Personal information</h4>
                      <p class="card-text">ID: {{profileData.CurrentUser}}</p>
                      <p class="card-text">First name: {{profileData.firstName}}</p>
                      <p class="card-text">Last name: {{profileData.lastName}}</p>
                      <p class="card-text">Phone number: {{profileData.phoneNumber}}</p>
                      <p class="card-text">Adress: {{profileData.adress}}</p>
                      <p class="card-text">Citizenship: {{profileData.citizenship}}</p>
                      <p class="card-text">Personal email: {{profileData.personalEmail}}</p>
                  </div>
                </div>
              </div>
              <div class="col"></div>
              <div class="col">
                <div class="card card-border" style="width: 30rem;">
                  <div class="card-body">
                    <h4 class="card-title text-center mb-3">Business information</h4>
                      <p>Company name: {{profileData.companyName}}</p>
                      <p>Chamber Of Commerce Number: {{profileData.chamberOfCommerceNumber}}</p>
                      <p>Street: {{profileData.street}}</p>
                      <p>House number: {{profileData.houseNumber}}</p>
                      <p>ZIP code: {{profileData.zipCode}}</p>
                      <p>Location: {{profileData.location}}</p>
                      <p>Company email: {{profileData.companyEmail}}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

我在下面的 created() 部分添加了 if/else。

这是脚本：

<script>
import firebase from "firebase";
import { db } from '../../config/db';

export default {
  data() {
    return {
      email: "",
      password: "",
      profileData: [],
      isHidden: true,
      seen: true,
      isLoggedIn: false
    }
  },
  firebase: {
    profile: db.ref('profile')
  },
  methods: {
    resetPassword() {
      const auth = firebase.auth();
      auth.sendPasswordResetEmail(auth.currentUser.email).then(() => {
        console.log('Email send');
        // Email sent.
      }).catch((error) => {
        // An error happened.
        console.log(error);
      });
    }
  },
  created() {
    if(firebase.auth().currentUser) {
      this.isLoggedIn = true;
      this.currentUser = firebase.auth().currentUser.email;
    }
    var user = firebase.auth().currentUser;
    if (this.user == this.profileData.CurrentUser) {
      this.seen = true;
    } else {
      this.seen = false;
    }
  }
};
</script>

在这个 Profile.vue 页面中，我有 添加功能：

AddProfile() {
            console.log(JSON.stringify(this.profileData) + this.currentUser)
            this.$firebaseRefs.profile.push({
                firstName: this.profileData.firstName,
                lastName: this.profileData.lastName,
                phoneNumber: this.profileData.phoneNumber,
                adress: this.profileData.adress,
                citizenship: this.profileData.citizenship,
                personalEmail: this.profileData.personalEmail,
                companyName: this.profileData.companyName,
                chamberOfCommerceNumber: this.profileData.chamberOfCommerceNumber,
                street: this.profileData.street,
                houseNumber: this.profileData.houseNumber,
                zipCode: this.profileData.zipCode,
                location: this.profileData.location,
                companyEmail: this.profileData.companyEmail,
                CurrentUser: this.currentUser
            })
            this.profileData.firstName = '';
            this.profileData.lastName = '';
            this.profileData.phoneNumber = '';
            this.profileData.adress = '';
            this.profileData.personalEmail = '';
            this.profileData.companyName = '';
            this.profileData.chamberOfCommerceNumber = '';
            this.profileData.street = '';
            this.profileData.houseNumber = '';
            this.profileData.zipCode = '';
            this.profileData.location = '';
            this.profileData.companyEmail = '';
            this.CurrentUser = '';
            window.scrollTo(0,0, 0,0);
            console.log('Added to database');
            /* Waiting for 2 seconds here */
            this.$router.push('/internship')
        },

Answer 1

显然你正在使用Vuefire。

正如您将在 Vuefire 文档中看到的那样，通过这样做

firebase: {
  profile: db.ref('profile')
},

您在profile 实时数据库节点上使用declarative biding，因此您获得该节点的所有子节点是正常的。

---

如果你只想显示当前用户对应的节点，你可以使用programmatic binding，如下所示：

<template>
  <div class="home">
    {{user}}
    <ol></ol>
  </div>
</template>

<script>
import { db } from "../firebase";
const profile = db.ref("profile");
export default {
  name: "demo",
  data() {
    return {
      user: null,
      id: null
    };
  },
  watch: {
    id: {
      immediate: true,
      handler(id) {
        this.$rtdbBind("user", profile.child(id));
      }
    }
  },
  created() {

    if (firebase.auth().currentUser) {
      this.id = currentUser.uid;
    }
  }
};
</script>