异步/等待不适用于VueX getter,但适用于日志
我有一个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上搜索一些示例:)
我对原始代码进行了很多重构,所以应该有一些打字错误或错误。
如果您找到一个,请修改。
相关文章