Axios isn't filling store on mount - vue.js

Question

I'm having an issue regarding state management. I can achieve getting both filling my state and projecting my state onto the frontend. Except I'm having an issue with WHEN the state is getting filled. Whenever I compile my project and I go to the page in question, title: 'test' is shown instead of my api. But when I press f5 the state gets filled with my api call. Is there any reason why my state isn't being filled by the api straight away? I'm using promise, shouldn't rendering wait 'till my api request is "done"?
media/index.vue
<template>
<div>
<section class="hero is-info">
<div class="hero-body">
<div class="container">
<h1 class="title">Wordpress</h1>
<h2 class="subtitle">Media</h2>
</div>
</div>
</section>
<section>
<div class="container p-3">
<p class="title">Media</p>
<div class="posts-wrapper">
<template v-for="media in MediaList">
<nuxt-link class="card" :key="media.id" :to="'/wordpress/media/'+media.id">{{media.title.rendered}}</nuxt-link>
</template>
</div>
</div>
</section>
</div>
</template>
<script>
export default {
head () {
return {
title: 'Wordpress media'
}
},
fetch ({store}) {
store.dispatch('getMediaList')
},
computed: {
MediaList () {
return this.$store.state.getMediaList.mediaList
}
}
}
</script>
<style lang="scss">
.posts-wrapper {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
a {
display: block;
margin: 1em;
padding: 1em;
flex: 1 1 200px;
text-transform: capitalize;
&:hover {
text-decoration: underline;
}
}
}
</style>
store/index.js
import Vuex from 'vuex'
import { getPosts } from './modules/wordpress/posts'
import { getPages } from './modules/wordpress/pages'
import { getMediaList } from './modules/wordpress/media'
const createStore = () => {
return new Vuex.Store({
modules: {
getPosts,
getPages,
getMediaList
}
})
}
export default createStore
store/media.js:
javascript
import API from '../../../api/request'
export const getMediaList = {
state: {
media: {},
mediaList: [{
title: {
rendered: 'test'
}
}]
},
mutations: {
setMediaList: (state, mediaList) => {
state.mediaList = mediaList
},
setCurrentMedia: (state, media) => {
state.media = media
}
},
actions: {
getMediaList ({commit}) {
return API.get(`/wp/media`)
.then((res) => {
commit('setMediaList', res.data)
})
.catch((err) => {
console.log(err)
})
},
getMedia ({commit, store}, id) {
return API.get(`/wp/media/${id}`)
.then((res) => {
commit('setCurrentMedia', res.data)
})
}
}
}

Answer 1

Dumb me, this did the trick:
Fetch:
async fetch ({store}) {
await store.dispatch('getMediaList')
}
Actions:
async getMediaList ({commit}) {
try {
const { data } = await API.get(`/wp/media`)
commit('setMediaList', data)
} catch (error) {
console.log(error)
}
}