如何从可组合文件中获取反应值到 setup() 方法中？

Question

//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

Vue 组件：

<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>

当我想从可组合文件 getCollection.js 访问 setup() 方法中的反应值时遇到问题。而且，它在 setup() 方法中显示“null”。我无法访问 setup()

中的值

console.log(error.value) // null 
                         // why is error value null here?

但是，它在模板中运行得很好。我从 template 而不是 setup() 获取 documents 和 error 的所有值。我怎样才能从 setup() 中获取所有值？

Answer 1

您正在记录 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
    }
  }
}

如何从可组合文件中获取反应值到 setup() 方法中？

How to get reactive value into setup() method from composable files?

javascript

vue.js

vuejs3

vue-composition-api