How to wait for state change before executing next action in Vuex - vue.js

Question

I'm trying to login and get user name at the same time. Here is how it works:
First action login gets access token and updates state.accessToken
Using state.accessToken I need to get user data at the same time (fetchUser) when login is pressed, however when fetchUser is executed state.accessToken is still null as actions are asynchronous. What is the best practice to wait for state change before executing the next action? I tried to look up for examples, but solutions found are not applicable for my case.
store.js
const store = new Vuex.Store({
state: {
accessToken: null,
user: null
},
mutations: {
authUser (state, userData) {
state.accessToken = userData.accessToken
},
storeUser (state, user) {
state.user = user
}
}
actions: {
login({commit}, authData) {
axios.post("http://example.com/token/create/", {
email: authData.email,
password: authData.password
})
.then(res => {
commit('authUser', {
accessToken: res.data.access
})
})
},
fetchUser({commit, state}) {
axios.get("http://example.com/api/auth/v1/me/", {
headers: {Authorization: "Bearer " + state.accessToken}
})
.then(res => {
commit('storeUser', res.data.user)
})
}
}
getters: {
user (state) {
return state.user
},
isAuthenticated(state) {
return state.accessToken !== null
}
}
})
login.vue
<template>
<form #submit.prevent="submitForm">
<div v-if="!auth" class="row">
<input class="col" placeholder="Email" v-model="formInfo.email" type="text"></input>
<input class="col" placeholder="Password" v-model="formInfo.password" type="password"></input>
<button class="col" type="submit" label="Log In"></button>
</div>
<div v-else class="row">
Hello {{ firstname }}
</div>
</form>
</template>
<script>
export default {
data() {
return {
formInfo: {
email: '',
password: ''
}
};
},
methods: {
submitForm() {
this.$store.dispatch('login', {email: this.formInfo.email, password: this.formInfo.password})
this.$store.dispatch('fetchUser')
}
},
computed: {
auth() {
return this.$store.getters.isAuthenticated
},
firstname() {
return this.$store.getters.user.firstname
}
}
}
};
</script>

Answer 1

have you tried adding await?
async submitForm() {
await this.$store.dispatch('login', {email: this.formInfo.email, password: this.formInfo.password});
await this.$store.dispatch('fetchUser');
}
it will wait for the login to finish before fetching the user
also maybe add async in your actions methods:
async login({commit}, authData) {...}
async fetchUser({commit, state}) {...}

Answer 2

You can dispatch an action from another action.
actions: {
login({commit, dispatch}, authData) {
axios.post("http://example.com/token/create/", {
email: authData.email,
password: authData.password
})
.then(res => {
const accessToken = res.data.access;
dispatch('fetchUser', accessToken);
commit('authUser', { accessToken })
})
},
fetchUser({commit, state}, accessToken) {
axios.get("http://example.com/api/auth/v1/me/", {
headers: {Authorization: "Bearer " + accessToken}
})
.then(res => {
commit('storeUser', res.data.user)
})
}
}

Answer 3

Evan's async/await solution should work.
If there are multiple pages/components that can issue actions in any order, and you need to not proceed with one action before another is complete, you could use the strategy of storing promises as state. You can then access the promise any other action depends on the completion of and await it before proceeding.
So in login, you would use async/await syntax and an extra mutation call:
const promise = axios.post("http://example.com/token/create/", {
email: authData.email,
password: authData.password
});
commit('loginPromise', promise);
const result = await promise;
You would need to add the above mutation.
Then in fetchUser, before issuing the API call:
await state.loginPromise
That would guarantee that the promise has completed. You will have to handle error scenarios of course.