状态Vuex无法与Nuxt.js一起正常工作

Question

I'm trying to set state vuex on my Nuxt.js App, but it don't work correctly. So here i'm set my state with fetch method:

fetch({app, store, route}) {
    app.$axios.$get(`apps/${route.params.id}`)
      .then(res => {
        store.dispatch('setApp', {
          ...res,
          id: route.params.id
        })
        console.log(app.store.state.app);
      })
  }

Here everything works correcty when i'm logging app.store, data is there, but when i'm trying to log it in:

  created() {
    console.log(this.$store);
  },
  mounted() {
    console.log(this.$store);
  }

Here's my store code:

const store = () => new Vuex.Store({

  state: {
    app: ''
  },
  mutations: {
    'SET_APP' (state, payload) {
      state.app = payload
    }
  },
  actions: {
    setApp (ctx, payload) {
      ctx.commit('SET_APP', payload)
    }
  },
  getters: {

  }
})

i't don't work my state is empty so data is not render on my template ( I hope that somebody gotta help me !

PS: Also when it's logging on client-side everything works fine, but in SSR not (

Answer 1

As stated from the docs

To make the fetch method asynchronous, return a Promise, Nuxt.js will wait for the promise to be resolved before rendering the component.

In code example above, axios request is made inside fetch hook, but Nuxt will not wait for it to resolve, as no promise is returned, so it keeps rendering the component, thus running created and mounted hooks, which by the time of invocation do not have filled $store .

In order to make it work, you should return a promise from fetch method.

If no additional code is present in your app, simply adding return statement will solve the issue:

fetch({app, store, route}) {
  return app.$axios.$get(`apps/${route.params.id}`)
    .then(res => {
      store.dispatch('setApp', {
      ...res,
      id: route.params.id
    })
    console.log(app.store.state.app);
  })
}