I want to initialize my store with data from an API. nuxtServerInit is not useful for my case because my Nuxt app target is set on 'static'. I'm trying to implement a router middleware to fetch data asynchronously but without blocking the main thread. In other word, the middleware lets the page to load (mounted) but updates store whenever the data has been fetched.

• The problem with an asynchronous middleware is that, it will not resolved until data is fetched.

• And, the problem with a synchronous middleware is that, my store will not updated.

here is my implementation:

middleware/initializer.js

export default function({ store }) {
  store.dispatch('app/initializeApp').then(() => console.log('app initialized'))
}

store/app.js

initializeApp({ dispatch }) {
   return dispatch('fetchOptions')
},
fetchOptions({ commit }) {
  return this.$axios.$post(someEndpoint).then(({ options }) => {
    commit('setAppOptions', options)
    return true
  }).catch(() => false)
}

I don't understand why the console log works but my store is not updated.