I have an object of convos with userIDs that I need to loop through and, inside the loop, I need to make a call to Firebase to get the corresponding userName and then return an object with the convos, userNames, and userIDs.

I have tried using the async/await and the result I get from console.log is correct but my return statement directly after that, is undefined. Why is this happening? They are receiving the same object.

store.js getter snippet

getConvosObj: state => {

  var convoObj = {};

  var userConvos = state.userProfile.convos;

  async function asyncFunction() {

    for (const key in userConvos) {

      if (userConvos.hasOwnProperty(key)) {

        const userID = userConvos[key];

        var userName;

        await fire.database().ref('/users/' + userID + '/userName').once('value', async (snapshot) => {

          userName = await snapshot.val();

          convoObj[key] = {userName, userID}

        })

      }

    }

    console.log(convoObj);   //result: correct object

    return convoObj;         //result: undefined

  }

  asyncFunction();

}

Why is this happening ?

Because you called async function synchronously.

lets make your code simpler.

getConvosObj: state => {

    async function asyncFunction() {

        // ...

    }



    asyncFunction();

}

at this point, your getConvosObj() will return nothing, because getConvosObj() ends before asyncFunction() ends.

you need to wait until your asyncFunction() ends, then your code should be like this:

getConvosObj: async state => { // <- changed here

  async function asyncFunction() {

    // ...

  }



  await asyncFunction(); // <- changed here too

}

but you should not do like this, because getters are not meant to be asynchronous by design.

this may work, but you should try a different approach.

So what should you do ?

Use actions before using getters

this is a basic approach.

async functions should be in actions.

so your store should be like this:

export default () => 

  new Vuex.Store({

    state: {

      convoObj: null

    },

    mutations: {

      updateConvoObj(state, payload) {

        state.convoObj = payload;

      }

    },

    actions: {

      async fetchAndUpdateConvoObj({ state, commit }) {

        const fetchUserData = async userId => {

          const snapShot = await fire.database().ref('/users/' + userID + '/userName').once('value');

          const userName = snapShot.val();



          return {

            userName: userName,

            userID: userId

          }

        }



        const userConvos = state.userProfile.convos;



        let convoObj = {};

        for (const key in userConvos) {

          if (userConvos.hasOwnProperty(key)) {

            const userId = userConvos[key];

            const result = await fetchUserData(userId);



            convoObj[key] = {

              userName: result.userName,

              userId: result.userId

            }

          }

        }



        commit('updateConvoObj', convoObj);

      }

    }

  });

then call your actions before using getter in your sample.vue:

await this.$store.dispatch('fetchAndUpdateConvoObj');

convoObj = this.$store.getters('getConvoObj');

wait for db and update store, then get its state.

doesnt make sense ?

Use vuexfire to connect your store directly to Realtime Database

another approach is this.

use vuexfire, then the state of the store is always up-to-date to realtime database, so you can call getters without calling actions.

i got tired to refactor / write a code, so google some sample if you wanna use that plugin :)

i refactored the original code a lot, so there should be some typo or mistake.

plz revise is if you find one.