如何在另一个VueUse useFirestore引用useFirestore？
如何在另一个VueUse useFirestore引用useFirestore？
提问于 2022-09-13 11:06:52
我正在尝试使用VueUse useFirestore()包装器。
它返回一个与Firestore文档同步的ref。
目前，我可以使用它来获取和显示users文档。
但是现在我需要通过引用来自websites文档的currentWebsiteId字段来获取和显示users文档。
当我尝试这样做的时候，什么都没有显示出来。控制台中也没有错误。
这就是我的代码的样子：
<template>
<div>{{ user }}</div>
<div>{{ website }}</div>
</template>
<script setup lang="ts">
import { useAuth } from '@vueuse/firebase/useAuth';
import { useFirestore } from '@vueuse/firebase/useFirestore';
import { doc } from 'firebase/firestore';
import { auth, db } from 'src/config/firebase';
import { User, Website } from 'src/types';
const { user: authUser } = useAuth(auth);
const userDocRef = doc(db, `users/${authUser.value?.uid}`);
const user = useFirestore<User>(userDocRef);
const websiteDocRef = doc(db, `websites/${user.value?.currentWebsiteId}`);
const website = useFirestore<Website>(websiteDocRef);
</script>由于useFirestore()是异步的，所以它将在返回实际的undefined文档后不久返回undefined。
我认为这可能是问题所在，所以我试着使用watch来解决这个问题：
let website = ref();
watch(user, () => {
const websiteDocRef = doc(db, `websites/${user.value?.currentWebsiteId}`);
website = useFirestore<Website>(websiteDocRef);
});但这也有同样的问题。什么都不显示，控制台中也没有错误。
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-09-18 23:12:25
正如@EstusFlask所评论的那样，博士们展示认为它需要包装在一个computed引用中。
这是因为当computed的参考值发生变化时，会重新计算它。
因此，websiteDocRef变成了这样：
const websiteDocRef = computed(() =>
doc(db, `websites/${user.value?.currentWebsiteId}`)
);以下是完整的代码：
<template>
<div>{{ user }}</div>
<div>{{ website }}</div>
</template>
<script setup lang="ts">
import { useAuth } from '@vueuse/firebase/useAuth';
import { useFirestore } from '@vueuse/firebase/useFirestore';
import { doc } from 'firebase/firestore';
import { auth, db } from 'src/config/firebase';
import { User, Website } from 'src/types';
const { user: authUser } = useAuth(auth);
const userDocRef = doc(db, `users/${authUser.value?.uid}`);
const user = useFirestore<User>(userDocRef);
const websiteDocRef = computed(() =>
doc(db, `websites/${user.value?.currentWebsiteId}`)
);
const website = useFirestore<Website>(websiteDocRef);
</script>Stack Overflow用户
发布于 2022-09-16 07:12:53
正如@Estus评论的那样，website = useFirestore --这是一个错误，永远不要重新分配参考文献，只有它们的价值。可组合性应该直接在安装程序中使用，通过多次调用它，您很可能会滥用它。用计算包包装依赖于doc()的currentWebsiteId。它已经在docs，vueuse.org/firebase/usefirestore/#中得到了解释。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73701878
复制相关文章
相似问题
腾讯云开发者
