用户.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>

用户。displayName在我的returnUser函数中是未定义的，但可以在顶部的模板中显示。如何访问该用户。displayName属性在我的returnUser函数?

可组合:

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函数。composable中的其余代码可以保持原样，因为当您能够访问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我还想说，先试试我上面的答案。现在，回到你的问题:如何更好地获取firstName &;我可以给你解释一下我在一个项目中实现了什么。所以我使用firebase auth进行身份验证&注册过程。当用户使用firebase注册时，您将获得一个不会更改的用户uid。因此，我会将所有用户数据存储在针对uid的集合中，作为文档id。

例子:

Collection	Doc	文档数据
users	xasdfoxkawe4s7sa4fa55w525asdfalsuw	{first: "John" lastName: "Doe"}
	asiu82kskadla1s85sdfklsuspalsjdjd	{first: "Jack" lastName: "Sparrow";}