Upon the creation of my Vue app, the requestUserProfile action is triggered. The main goal is to fetch data from the "/api/user/" API call and store it in the state before executing the setUserProfile mutation.
The issue arises when the setUserProfile mutation is being called even before the data has been set in the state after receiving the API response. Is there a way to ensure that the requestUserInfo function is fully executed before triggering the setUserProfile?
Below is the code snippet I am currently working on:
state() {
return {
requestUser: null,
profile: null
}
},
mutations: {
setUserInfo (state) {
apiService("/api/user/")
.then(data => {
state.requestUser = data["username"]
})
},
setUserProfile (state) {
let endpoint = "api/profile/";
if (state.requestUser) {
apiService(endpoint)
.then(data => {
state.profile = data
})
}
}
},
actions: {
async requestUserInfo ({ commit }) {
commit('setUserInfo')
},
async requestUserProfile ({ dispatch, commit }) {
await dispatch('requestUserInfo') // wait for `requestUserInfo` to finish
commit('setUserProfile')
}
},