VueX getter not functioning with Async/Await, while log function does work

Question

VueX getter not functioning with Async/Await, while log function does work

I am working on a situation where I have a collection of conversations associated with userIDs that I need to iterate through. Within this loop, I must make a call to Firebase to retrieve the corresponding userNames and then generate an object containing the conversations, userNames, and userIDs.

Despite using async/await, when I log the result in the console it appears correct. However, for some reason, the return statement directly after logging is resulting in undefined. Even though they are essentially the same object, why is this occurring?

Snippet from store.js Getter

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();
}

javascript firebase vue.js async-await vuex

Answer 1

Answer №1

Why is this happening ?

The reason for this issue is because you have invoked an asynchronous function synchronously.
Let's simplify your code.

getConvosObj: state => {
    async function asyncFunction() {
        // ...
    }

    asyncFunction();
}

At this point, your getConvosObj() will not return anything as it completes before asyncFunction().
You need to wait for asyncFunction() to finish for the following code to work:

getConvosObj: async state => { // <- changed here
  async function asyncFunction() {
    // ...
  }

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

However, this approach is not recommended as getters are not designed to be asynchronous.
While it may work, try exploring a different solution.

So what should you do ?

Utilize actions before using getters

Here's a fundamental solution.

Async functions should be placed in actions.
Therefore, structure your store 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 utilizing getters in your sample.vue:

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

Wait for the database to update and the store to refresh before retrieving its state.
Making sense now?

Use vuexfire to link your store directly to the Realtime Database

Another option is to employ vuexfire which keeps the store's state synced with the realtime database, enabling you to access getters without calling actions.
If interested, look up some examples of using that plugin :)

I've made substantial changes to the original code, so there might be some errors or typos.
Kindly review and correct them if found.

Answer 2

Why is this happening ?

The reason for this issue is because you have invoked an asynchronous function synchronously.
Let's simplify your code.

getConvosObj: state => {
    async function asyncFunction() {
        // ...
    }

    asyncFunction();
}

At this point, your getConvosObj() will not return anything as it completes before asyncFunction().
You need to wait for asyncFunction() to finish for the following code to work:

getConvosObj: async state => { // <- changed here
  async function asyncFunction() {
    // ...
  }

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

However, this approach is not recommended as getters are not designed to be asynchronous.
While it may work, try exploring a different solution.

So what should you do ?

Utilize actions before using getters

Here's a fundamental solution.

Async functions should be placed in actions.
Therefore, structure your store 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 utilizing getters in your sample.vue:

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

Wait for the database to update and the store to refresh before retrieving its state.
Making sense now?

Use vuexfire to link your store directly to the Realtime Database

Another option is to employ vuexfire which keeps the store's state synced with the realtime database, enabling you to access getters without calling actions.
If interested, look up some examples of using that plugin :)

I've made substantial changes to the original code, so there might be some errors or typos.
Kindly review and correct them if found.

VueX getter not functioning with Async/Await, while log function does work

Answer №1

Why is this happening ?

So what should you do ?

Utilize actions before using getters

Use vuexfire to link your store directly to the Realtime Database

Similar questions

Creating cookies in R Shiny: Storing variables for future use

Grab the SVG and resize it to a smaller scale

Accessing the ID of individually selected rows as well as multiple rows in Vuetify data tables by utilizing the "show select" property

Tips for eliminating empty trailing values and Carriage Returns from a JavaScript array

What is the best way to incorporate this CodePen snippet into a Vue project?

Error occurs when using Express.js in combination with linting

The React JSON Unhandled Rejection problem requires immediate attention

Can you tell me how to add a variable to an array of objects in JavaScript?

Is it possible to combine jQuery Mobile with Vue.js in a project?

Having trouble retrieving data from MongoDB and rendering it on an HTML page

The JQuery File-Upload plugin remains inactive even after a file has been chosen

The Vue.js scripts and styles declared in the index.html file seem to be malfunctioning

What is the best way to position the button under the label?

Vue does not recognize the Nuxt $route

The value entered is displaying as not defined

Preventing page navigation in JavaScript: Why it's so challenging

Generate a configuration file that allows for the reading and storage of modifications

Guide to making a Typescript interface by combining elements from two separate interfaces without utilizing inheritance

Issue with RegisterClientScriptCode function following a partial postback

Difficulty in constructing an array from several Firebase Storage URLs