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

Question

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

使用 Vue2 中的 Options API 这样做没有问题

<template>
<div class="header"><h2>Edit Top Image</h2></div>
    <div v-if="content">
    <form class="wysiwyg-form" @submit.prevent="handleEditText">
    <Editor v-model="content.hotelDescription" class="editorStyle" />
    <button class="update-btn">Update</button>
    </form>
    </div>
</template>

<script>
import projectFirestore from '@/firebase/config'
export default {
    data() {
        return {
            content: null            
        }
    },
    methods: {
        handleEditText() {
            projectFirestore.collection('hotel_section').doc(this.content.id).update({
                hotelDescription: this.content.hotelDescription 
            }).then(() => {
                this.$router.push({ name: 'Hotel' })
            }).catch(err => {
                console.log(err)
            })
        }
    },
    created() {
        let ref = projectFirestore.collection("hotel_section").doc(this.$route.params.id);
        ref.get().then((doc) => {
            this.content = doc.data();
            this.content.id = doc.id;
        });
    }
  }
</script>

但我想使用 Vue3 和组合 API 来完成同样的任务，但它不起作用。我在控制台中没有收到任何错误。数据只是没有显示。我需要重写什么才能完成这项工作？

<template>
<div class="header"><h2>Edit Top Image</h2></div>
<div v-if="content" class="Hotel-Section-Edit">
<div class="header"><h2>Edit Hotel Information</h2></div>
    <form class="wysiwyg-form" @submit.prevent="handleSubmit">
        <div class="error">{{ fileError }}</div>
        <Editor v-model="content.hotelDescription" placeholder="Change hotel description" class="editorStyle"/>
        <button class="update-btn" v-if="!isPending">Update</button>
        <button class="update-btn" v-else disabled>Updating...</button>
    </form>
</div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router' 
import useDocument from '@/composables/useDocument'
import useCollection from '@/composables/useCollection'
export default {
    props: ['content'],
    setup(props) {
        const content = ref('')
        const file = ref(null)
        const fileError = ref(null)
        const { error } = useCollection()
        const isPending = ref(false)
        const router = useRouter();

    const handleSubmit = async () => {
    if (!props.content) return
    const { updateDoc } = useDocument('hotel_section', props.content.id)
            await updateDoc({
                hotelDescription: hotelDescription.value,
            })
                isPending.value = false
                if(!error.value) {
                router.push({ name: "Hotel" })
                }
        }

        return {
            content,
            handleSubmit,
            fileError,
            isPending,
            error,
            file

        }
    }
}
</script>

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

使用文档.js

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

const useDocument = (collection, id) => {
    const error = ref(null)
    const isPending = ref(false)

    let docRef = projectFirestore.collection(collection).doc(id)

    const deleteDoc = async () => {
        isPending.value = true
        error.value = null
        try {
            const res = await docRef.delete() 
            isPending.value = false
            return res
        }catch(err) {
            console.log(err.message)
            isPending.value = false
            error.value = 'Could not delete document'
        }
    }

    const updateDoc = async (updates) => {
        isPending.value = true
        error.value = null
        try {
            const res = await docRef.update(updates) 
            isPending.value = false
            return res
        }catch(err) {
            console.log(err.message)
            isPending.value = false
            error.value = 'Could not update document'
        }
    }

    return {
        error,
        isPending,
        deleteDoc,
        updateDoc
    }

}

export default useDocument

useCollection.js

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

const useCollection = (collection) => {
    const error = ref(null)
    const isPending = ref(false)

    const addDoc = async (doc) => {
        error.value = null
        isPending.value = true

        try {
            await projectFirestore.collection(collection).add(doc)
            isPending.value = false
        } catch(err) {
            console.log(err.message)
            error.value = 'Error getting collection'
            isPending.value = false
        }
    }

    return {
        error,
        addDoc,
        isPending
    }
}

export default useCollection

标签： javascriptfirebasevue.jsvuejs3