Nuxt.js Loading data serverside with nuxtServerInit and Vuex

Question

Currently i am working on storing data for a job opening application. For the backend i use Laravel and for the frontend i use Nuxt.js I am new to Nuxt, so i'm kinda stuck on the following issue.

I have a page for creating a new job opening called new-job.vue. I also created a store called jobs.js for handling the states.

On new-job.vue i have a form with data that has to be rendered in a list before the form starts.Like a list of all countries etc.. in order for me to select them in the form.

At this point i'm using asyncData within the export default on new-job.vue:

<script>
export default {

    asyncData(context) {
        return context.app.$axios
            .$get('jobs/create')
            .then(data => {
                //context.store.dispatch('jobs/getTypes', data.types)
                context.store.dispatch('jobs/getPlatforms', data.platforms)
                context.store.dispatch('jobs/getCountries', data.countries)data.branches)

                // return {
                //     loadedPost: { ...data, id: context.params.postId }
                // }composer required barr
            })
            .catch(e => context.error(e))
    },
     computed: {
         types () { return this.$store.state.jobs.types },
         platforms () { return this.$store.state.jobs.platforms },
         countries () { return this.$store.state.jobs.countries },

    },
}

The asyncData method works and the lists of types, platforms and countries are getting filled with data from the database and the state from the Vuex store gets updated. .Only the data is being rendered on the client side.

I prefer this data to be loaded server side, so i was looking at nuxtServerInit. Only can someone explain to me how i can make this happen.

I placed an async call inside the export default of new-job.vue:

     async nuxtServerInit ({ commit, state }, { app }) {
        let res = await axios.get(`jobs/create`)

        console.log(res)
        commit('setPlatforms', res.data.platforms)
        commit('setTypes', res.data.types)
        commit('setCountries', res.data.countries)
    },

I created the commits in the mutations of the jobs.store, but the states are not being updated.

What am i doing wrong and/or what am i missing?

Or maybe another question, is nuxtServerInit the way to go? Or is loading these lists of data on the clientside not a big deal?

UPDATE:

I use modules mode for the store, so i created a store called jobs.js. Inside this file i tried to call nuxtServerInit as well, but i didn't get any response.

nuxtServerInit(vuexContext, context) {
    return context.app.$axios
        .$get('jobs/create')
        .then(data => {
            console.log(data)
        })
        .catch(e => context.error(e))
},

Answer 1

From nuxtServerInit API reference in Nuxt.js documentation:

If the action nuxtServerInit is defined in the store, Nuxt.js will call it with the context (only from the server-side).

In other words, it is a reserved store action available only in store/index.js file and if defined will be called on server-side before rendering requested routes.

Only asyncData and fetch methods are available within pages.