Получить весь список из одной коллекции камина с VueJS

Question

Я хочу отобразить весь список пользователей по запросу пожарного.Но я застрял в цепочке обещаний.Для запроса документов коллекции необходимо выполнить два асинхронных шага.Как я могу ждать, пока заполнить весь список установлен.

Вот мой код.Я надеюсь, что мой fetchUsers() заполнить массив без цепочки обратного вызова.

const db = firebase.firestore();

export default {
  data: () => {
    return {
      users: [],
    }
  },
  mounted: function() {
      this.fetchUsers()
      console.info('mounted, users:', this.users) // // => at this point, this.users is not yet ready.
  },
  computed: {
      items: function() {
          return this.users
      }
  },
  methods: {
    async fetchUsers () {
        await db.collection('users').get()
            .then(snapshot => {
                snapshot.forEach( doc => {
                    const user = doc.data()
                    console.log('forEarch:' , user)
                    user.id = doc.id
                    this.users.push(user)
                })
            })
            .catch(error => {
                console.error(error)
            })
        console.debug('fetchUser return: ', this.users)  // => at this point, this.users is not yet ready.
    },

Answer 1

Не смешивайте асинхронный / ожидающий синтаксис с then / catch

const query = db.collection('users')

async fetchUsers () {
    try {
        const { docs } = await query.get()

        this.users = docs.map(doc => {
          const { id } = doc
          const data = doc.data()
          return { id, ...data }
        })

        console.log('Loaded users', this.users)
    } catch (error) { throw new Error('Something gone wrong!') }
}