Javascript 我可以使用Options API更新数据，但不能使用Composition API

所以，我想编辑一些存储在NoSQL数据库中的数据，在本例中是Firebase

使用Vue2中的选项API进行此操作没有问题

编辑顶部图像
更新
从“@/firebase/config”导入projectFirestore
导出默认值{
数据（）{
返回{
内容：空
}
},
方法：{
handleEditText（）{
projectFirestore.collection（'hotel_section'）.doc（this.content.id）。更新({
hotelDescription:this.content.hotelDescription
}).然后（（）=>{
这是。$router.push（{name:'Hotel'}）
}).catch（错误=>{
console.log（错误）
})
}
},
创建（）{
let ref=projectFirestore.collection（“hotel_section”）.doc（此.$route.params.id）；
参考get（）。然后（（文档）=>{
this.content=doc.data（）；
this.content.id=doc.id；
});
}
}

但我想使用Vue3和CompositionAPI实现同样的功能，但它不起作用。我在控制台中没有收到任何错误。数据没有显示出来。 我需要重写什么才能使它工作

编辑顶部图像
编辑酒店信息
{{fileError}}
更新
更新。。。
从“vue”导入{ref}
从“vue路由器”导入{useRouter}
从“@/composables/useDocument”导入useDocument
从“@/composables/useCollection”导入useCollection
导出默认值{
道具：[“内容”]，
设置（道具）{
常量内容=ref（“”）
常量文件=ref（空）
const fileError=ref（空）
const{error}=useCollection（）
常数isPending=ref（假）
const router=useRouter（）；
const handleSubmit=async（）=>{
如果（！props.content）返回
const{updateDoc}=useDocument（'hotel_section'，props.content.id）
等待更新({
hotelDescription:hotelDescription.value，
})
isPending.value=false
如果（！error.value）{
路由器推送（{name:“Hotel”}）
}
}
返回{
内容,，
手推，
文件错误，
iSping，
错误，
文件
}
}
}

以下是为Vue3解决方案导入的脚本

useDocument.js

从“vue”导入{ref}
从“../firebase/config”导入{projectFirestore}
const useDocument=（集合，id）=>{
常量错误=ref（空）
常数isPending=ref（假）
让docRef=projectFirestore.collection（collection）.doc（id）
常量deleteDoc=async（）=>{
isPending.value=true
error.value=null
试一试{
const res=wait docRef.delete（）
isPending.value=false
返回res
}捕捉（错误）{
console.log（错误消息）
isPending.value=false
error.value='无法删除文档'
}
}
const updateDoc=async（更新）=>{
isPending.value=true
error.value=null
试一试{
const res=wait docRef.update（更新）
isPending.value=false
返回res
}捕捉（错误）{
console.log（错误消息）
isPending.value=false
error.value='无法更新文档'
}
}
返回{
错误，
iSping，
删除文档，
updateDoc
}
}
导出默认useDocument

useCollection.js

从“vue”导入{ref}
从“../firebase/config”导入{projectFirestore}
const useCollection=（collection）=>{
常量错误=ref（空）
常数isPending=ref（假）
const addDoc=async（doc）=>{
error.value=null
isPending.value=true
试一试{
等待projectFirestore.collection（collection）.add（doc）
isPending.value=false
}捕捉（错误）{
console.log（错误消息）
error.value='获取集合时出错'
isPending.value=false
}
}
返回{
错误，
addDoc，
散播
}
}
导出默认useCollection

您在哪里设置内容变量？在带有选项API的示例中，您正在创建的函数中创建它。

const{error}=useCollection（）

useCollection不需要集合名称吗？另外，如果用try-catch块包装等待，您可能会看到一些错误