异步/等待不适用于VueX getter,但适用于日志

2022-03-03 00:00:00 firebase async-await javascript vue.js vuex

我有一个userID的Convos对象,我需要遍历该对象,并且在循环内,我需要调用Firebase以获取相应的用户名,然后返回一个包含Convos、用户名和UserID的对象。

我已经尝试使用异步/等待,从console.log获得的结果是正确的,但紧随其后的返回语句是未定义的。为什么会发生这种事?它们正在接收相同的对象。

store.jsgetter代码段

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

解决方案

为什么会发生这种情况?

因为您同步调用了异步函数。
让我们简化您的代码。

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

    asyncFunction();
}

此时,您的getConvosObj()将不返回任何内容,因为getConvosObj()asyncFunction()结束之前结束。
您需要等待asyncFunction()结束,然后您的代码应该如下所示:

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

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

但是您不应该这样做,因为getter在设计上并不是异步的。
这可能行得通,但您应该尝试其他方法。

那么您应该怎么做?

在使用getter之前使用操作

这是基本方法。

异步函数应处于操作状态。
因此,您的商店应该是这样的:

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

然后在sample.vue中使用getter之前调用您的操作:

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

等待数据库并更新存储,然后获取其状态。
没有意义吗?

使用vuexfire将您的存储直接连接到实时数据库

另一种方法是这样。

使用vuexfire,则存储区的状态始终是实时数据库的最新状态,因此您可以调用getter,而无需调用操作。
我厌倦了重构/编写代码,所以如果您想使用该插件,请在Google上搜索一些示例:)

我对原始代码进行了很多重构,所以应该有一些打字错误或错误。
如果您找到一个,请修改。

相关文章