//Composable file getCollection.js
const getCollection = (collection) => {
const documents = ref(null)
const error = ref(null)
let collectionRef = projectFirestore.collection(collection)
.orderBy('createdAt')
const unsub = collectionRef.onSnapshot((snap) => {
let results = []
console.log('snapshot')
snap.docs.forEach(doc => {
doc.data().createdAt && results.push({
...doc.data(),
id: doc.id
})
})
documents.value = results
error.value = null
}, (err) => {
documents.value = null
error.value = "Could not fetch data"
})
watchEffect((onInvalidate) => {
onInvalidate(() => {
unsub()
})
})
return {
error,
documents,
}
}
export default getCollection
组件视图：
<template>
<div class="chat-window">
<div v-if="error">{{ error }}</div>
<div v-if="documents" class="messages" ref="messages">
<div v-for="doc in formattedDocuments" :key="doc.id" class="single"> //Getting all the values perfectly
<span class="created-at">{{ doc.createdAt }} ago</span>
<span class="name">{{ doc.name }}</span>
<span class="message">{{ doc.message }}</span>
</div>
</div>
</div>
</template>
<script>
import { ref } from "vue";
import getCollection from "../composable/getCollection";
export default {
setup() {
const { error, documents} = getCollection("messages");
console.log(error.value) // null
return {
error,
documents
}
}
}
</script>
我想setup()从可组合文件访问方法中的反应性值时遇到麻烦getCollection.js。而且，它在setup()方法内部显示“ null” 。我无法从中访问值setup()
console.log(error.value) // null
// why is error value null here?
但是，它在模板内部运行良好。我得到的所有值documents，并error从template但不从setup()。我怎样才能从中获得所有价值setup()？
您正在记录error ref更新之前的值，当成功加载数据时，异步发生该值。
如果您希望在error更改时进行更新，则可以watch：
import { watch } from "vue";
import getCollection from "../composable/getCollection";
export default {
setup() {
const { error, documents } = getCollection("messages");
watch(error, newErrorValue => {
console.log(newErrorValue);
})
return {
error,
documents
}
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句