javascript - Hur löser man ett Firestore-promise direkt till en Vue reactive() proxy?

Med Vue 3/Typescript, hur löser jag ett FireStore-löfte som resulterar i en array av objekt, till ett reaktivt proxy-objekt med hjälp av map()?

I det här fallet vill jag inte använda forEach() eller 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 [ {…} ]

Svar #1

Initiera din reaktiva egenskap med en tom array och ändra sedan inuti onMounted-hooken:

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,
               }))
           
            })

})
   ...

}