User.displayName 在脚本中无法访问，但在 VueJs 的模板中可用？

Question

我在我的函数中导入了一个当前用户可组合，但是当我尝试访问用户对象的任何属性时它返回未定义。您能帮帮我吗，我是 Vue 新手？

这是我在其中调用用户属性的模板。

<template>
  <p>Process Payroll</p>
  <h1>{{ user.displayName }} </h1>
  <h1>{{ docs }} </h1>
</template>

<script>
import getUser from '@/composables/getUser'
import { ref, onMounted } from 'vue'
import { projectFirestore, projectAuth } from '@/firebase/config'
import { useRouter, useRoute } from 'vue-router'

export default {
    setup() {
    const { user } = getUser();
    const lastName = ref("");
    const firstName = ref("");
    const docs = ref([]);

    const returnUser = async () => {
      const res = await projectFirestore
        .collection("users")
        .where("displayName", "==", user.displayName)
        .get();
      if (!error.value) {
        // check your response here.
        console.log(res);
        const doc = res.filter((userObj) => {
          if (user.displayName === userObj.data().displayName) {
            return user.lastName;
          }
        });
        docs.value = doc;
      }
    };

        onMounted(returnUser)

    return { user, docs, returnUser};
  },
}
</script>

User.displayName 在我的 returnUser 函数中未定义，但可以显示在顶部的模板中。如何在 returnUser 函数中访问 user.displayName 属性？

可组合：

import { ref } from 'vue'
import { projectAuth } from '../firebase/config'

// refs
const user = ref(projectAuth.currentUser)

// auth changes
projectAuth.onAuthStateChanged(_user => {
  console.log('User state change. Current user is:', _user)
  user.value = _user
});

const getUser = () => {
  return { user } 
}

export default getUser

Answer 1

好的，问题是returnUser 将被vue 调用，而不管当前用户的auth 状态如何。认证状态会在一瞬间左右被firebase改变，但到那时，你在returnUser中的代码已经执行了。在script 标签内自然给你undefined。但是，由于此属性是反应性的，所以当身份验证状态发生变化时它总是会发生变化，从而使用户详细信息在模板中可用。

解决方案是为user 属性设置一个观察程序，以便在用户的身份验证状态更改时调用returnUser 函数。可组合中的其余代码可以保持原样，因为它可以正常工作，因为您可以访问template 标记中的用户对象。

<template>
  <p>Process Payroll</p>
  <h1>{{ user.displayName }} </h1>
  <h1>{{ docs }} </h1>
</template>

<script>
import getUser from '@/composables/getUser'
import { ref, onMounted, watch } from 'vue'
import { projectFirestore, projectAuth } from '@/firebase/config'
import { useRouter, useRoute } from 'vue-router'

export default {
    setup() {
    const { user } = getUser();
    const lastName = ref("");
    const firstName = ref("");
    const docs = ref([]);

    const returnUser = async () => {
      const res = await projectFirestore
        .collection("users")
        .where("displayName", "==", user.displayName)
        .get();
      if (!error.value) {
        const doc = res.filter((userObj) => {
          if (user.displayName === userObj.data().displayName) {
            return user.lastName;
          }
        });
        docs.value = doc;
      }
    };

    onMounted(returnUser);
    watch(user, returnUser);

    return { user, docs, returnUser};
  },
}
</script>

编辑：我之前忘记从 vue 导入 watch 方法。更新了我的答案来做到这一点。

@BilalHussain 我还要说先试试我上面的答案。现在，关于获取名字和姓氏的更好方法的问题，我可以向您解释我为我的一个项目实施的内容。所以我使用firebase auth 进行身份验证和注册过程。当用户向firebase 注册时，您会得到一个不会更改的用户uid。所以我会将所有用户数据存储在一个集合中，以 uid 作为文档 ID。

示例：

Collection	Doc	Document data
users	xasdfoxkawe4s7sa4fa55w525asdfalsuw	{ first: "John", lastName: "Doe" }
	asiu82kskadla1s85sdfklsuspalsjdjd	{ first: "Jack", lastName: "Sparrow" }

当用户登录时，在前端我总是有uid，所以我可以只查询该特定文档并获取数据，而不是使用以下语法搜索整个集合：

const currentUser = await firebase.auth().currentUser;
const user = await firestore.collection("users").doc(currentUser.uid).get();
console.log(user.data())

所以我相信，您可以使用类似的方法针对 firestore 中的唯一哈希创建文档。所以当用户登录时，你有哈希值，你可以直接从 firestore 查询它。希望这会有所帮助！

参考资料：

• Querying data
• Managing users