javascript - Πώς να επιλύσετε μια υπόσχεση Firestore απευθείας σε ένα reactive() proxy του Vue;

Χρησιμοποιώντας Vue 3/Typescript, πώς μπορώ να επιλύσω μια υπόσχεση FireStore που επιστρέφει έναν πίνακα αντικειμένων, σε ένα αντιδραστικό proxy αντικείμενο χρησιμοποιώντας το map();

Σε αυτή την περίπτωση, δεν επιθυμώ να χρησιμοποιήσω forEach() ή Vuex.

setup(){
   ...
   const clients = reactive(
       db
           .collection('users')
           .orderBy('name', 'asc')
           .get()
           .then(snapshot =>
               snapshot.docs.map(doc => ({
                   id: doc.id,
                   name: doc.data().name,
               }))
           )
   )
   ...
}

console.log() :

Promise { <state>: "pending" }
    <state>: "fulfilled"
    <value>: Array [ {…} ]

Απάντηση #1

Αρχικοποιήστε την αντιδραστική ιδιότητα σας με έναν κενό πίνακα και στη συνέχεια τροποποιήστε την μέσα στο hook onMounted:

setup(){
   ...
   const state = reactive({
     clients:[]
   })

onMounted(()=>{
  db.collection('users')
           .orderBy('name', 'asc')
           .get()
           .then(snapshot =>{
             state.clients=  snapshot.docs.map(doc => ({
                   id: doc.id,
                   name: doc.data().name,
               }))
           
            })

})
   ...

}