VUEX getters returned too fast - vue.js

Question

I've a problem with getters. At first I call an action getWeather which is async:
export const actions = {
async getWeather ({commit, state}) {
try {
const locationResponse = await VueGeolocation.getLocation({ enableHighAccuracy: true });
const url = `https://api.openweathermap.org/data/2.5/weather?lat=${locationResponse.lat}&lon=${locationResponse.lng}&units=metric&appid=${process.env.apikey}`;
const response = await fetch(url);
const data = await response.json();
await commit('SET_WEATHER', data);
console.log(`DATA: ${data}`) // returns me the weather data
} catch (error) {
return console.log(error);
}
}
}
and then in my index.vue file I make this:
<script>
import { mapActions, mapGetters } from 'vuex';
export default {
beforeCreate() {
this.$store.dispatch('getWeather');
},
created() {
console.log(this.$store.getters.getWeatherInfo) // returns null
},
computed: {
...mapGetters(['getWeatherInfo'])
}
}
</script>
This returns me the null value from the state even though I mutate the state.
created() { console.log(this.$store.getters.getWeatherInfo) // returns null
Vuex mutation:
export const mutations = {
SET_WEATHER (state, payload) {
state.weather = payload;
}
}
How do I get the weather data then not null in the index.vue file ?

Answer 1

The reason you see null in created is because asynchronous action started in beforeCreate is not complete yet.
If you really need result of the action to be complete in created you need to to this:
async created() {
await this.$store.dispatch('getWeather');
console.log(this.$store.getters.getWeatherInfo) // now the data is in store
}
If you don't need data to be ready in created it's better to remove await and write your component template using v-if - "render this only if my getter is not null" ...it will be not-null eventually ("sometime in the future") and Vue will re-render your component...