javascript - Nuxt.js Loading data serverside with nuxtServerInit and Vuex - Stack Overflow

admin管理员组

文章数量:1277359

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 }
                // }poser required barr
            })
            .catch(e => context.error(e))
    },
     puted: {
         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 ({ mit, state }, { app }) {
        let res = await axios.get(`jobs/create`)

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

I created the mits 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))
},

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 }
                // }poser required barr
            })
            .catch(e => context.error(e))
    },
     puted: {
         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 ({ mit, state }, { app }) {
        let res = await axios.get(`jobs/create`)

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

I created the mits 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))
},

• javascript
• vue.js
• vuex
• nuxt.js
• vuex-modules

Share Improve this question Follow edited Oct 31, 2018 at 13:18 user2314339 asked Oct 31, 2018 at 12:38 user2314339user2314339 39311 gold badge66 silver badges1616 bronze badges 2

• Please, clarify this statement: I tried an async call within the export default from new-job.vue. Where did you put nuxtServerInit? – aBiscuit Commented Oct 31, 2018 at 12:44
• i put nuxtServerInit in new-job.vue – user2314339 Commented Oct 31, 2018 at 12:50

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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.

本文标签： javascriptNuxtjs Loading data serverside with nuxtServerInit and VuexStack Overflow