Nuxt.js Загрузка данных на сервер с помощью nuxtServerInit и Vuex - PullRequest
Новая
       49

Nuxt.js Загрузка данных на сервер с помощью nuxtServerInit и Vuex

0 голосов
/ 31 октября 2018

В настоящее время я работаю над хранением данных для заявления о приеме на работу. Для бэкэнда я использую Laravel, а для внешнего интерфейса я использую Nuxt.js Я новичок в Nuxt, так что я застрял в следующей проблеме.

У меня есть страница для создания нового открытия вакансии под названием new-job.vue. Я также создал магазин jobs.js для обработки состояний.

На new-job.vue у меня есть форма с данными, которые должны быть отображены в списке перед запуском формы. Как и список всех стран и т. Д., Чтобы я мог выбрать их в форме.

На данный момент я использую asyncData в рамках экспорта по умолчанию для 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 },

    },
}

Метод asyncData работает, и списки типов, платформ и стран заполняются данными из базы данных, а состояние из хранилища Vuex обновляется. . Только данные отображаются на стороне клиента.

Я предпочитаю, чтобы эти данные загружались на стороне сервера, поэтому я смотрел на nuxtServerInit. Только кто-нибудь может объяснить мне, как я могу это сделать.

Я поместил асинхронный вызов в экспорт по умолчанию для 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)
    },

Я создал коммиты в мутациях jobs.store, но состояния не обновляются.

Что я делаю не так и / или что мне не хватает?

Или, может быть, другой вопрос, стоит ли использовать nuxtServerInit? Или загрузка этих списков данных на стороне клиента не имеет большого значения?

UPDATE:

Я использую режим модулей для магазина, поэтому я создал магазин под названием jobs.js. Внутри этого файла я тоже пытался вызвать nuxtServerInit, но ответа не получил. 

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

1 Ответ

0 голосов
/ 31 октября 2018

Из раздела nuxtServerInit в документации Nuxt.js:

Если в хранилище определено действие nuxtServerInit, Nuxt.js вызовет его с контекстом (только со стороны сервера).

Другими словами, это зарезервированное действие хранилища, доступное только в файле store/index.js, которое, если оно определено, будет вызываться на стороне сервера перед обработкой запрошенных маршрутов.

В компонентах страниц доступны только методы asyncData и fetch.

...