Nuxt.js загрузка данных на стороне сервера с помощью nuxtserverinit и vuex

В настоящее время я работаю над хранением данных для заявки на открытие вакансии. Для бэкэнда я использую 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? Или загрузка этих списков данных на стороне клиента не имеет большого значения?

ОБНОВИТЬ:

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

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

Пожалуйста, поясните это утверждение: I tried an async call within the export default from new-job.vue. Куда ты nuxtServerInit положил?

aBiscuit 31.10.2018 13:44

я помещаю nuxtServerInit в new-job.vue

user2314339 31.10.2018 13:50
1
2
18 896
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

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

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

Спасибо, что нашли время, чтобы прокомментировать. Я обновил свой пост с помощью вызова nuxtServerInit, который я использовал в своем файле магазина jobs.js. Может быть, у вас есть простой вызов nuxtServerInit, который я могу использовать, чтобы посмотреть, есть ли ответ?

user2314339 31.10.2018 14:18
nuxtServerInit можно использовать только в файле store/index.js, как указано выше. Это может быть файл, который экспортирует одно действие, но он все равно будет работать. Невозможно вызвать nuxtServerInit в другом месте, даже в других модулях магазина.
aBiscuit 31.10.2018 14:20

Хорошо, это объясняет, почему это не работает. Я думал, что вы можете вызвать nuxtServerInit в каждом магазине. Спасибо, что прояснили это :) Затем я немного перефразирую вопрос и спрошу вас, нужно ли вам создавать списки для полей ввода в форме (список всех стран и т. д.), Является ли метод asyncData хорошим способом сделать что? Или вы бы использовали другое решение?

user2314339 31.10.2018 14:33

Если упомянутые выше списки необходимы для приложения и без них нет смысла загружать страницу, то я бы предложил использовать nuxtServerInit для заполнения магазина. В противном случае я бы рекомендовал использовать метод компонента страницы fetch для заполнения хранилища просто потому, что можно кэшировать данные в vuex и избежать дополнительных запросов во время навигации внутри приложения. Это можно сделать, проверив наличие данных в магазине перед запросом к API.

aBiscuit 31.10.2018 14:38

Еще раз спасибо за комментарий. Я собираюсь проверить, смогу ли я заставить работать метод выборки. Не обязательно, чтобы списки загружались с самого начала. Списки должны быть там, когда открывается страница создания вакансии.

user2314339 31.10.2018 14:47

Есть ли альтернатива на стороне клиента для приложений, которые не используют SSR?

pirmax 03.10.2019 09:31

Есть разные способы добиться результата только в клиентском приложении. И правильное решение будет зависеть от типа получаемых данных. В общем, я бы предложил изначально отображать компонент загрузчика внутри App.vue в зависимости от конкретной переменной состояния (например, dataLoaded) и отправлять настраиваемое действие хранилища, которое загрузит необходимые данные. После загрузки всех данных обновите переменную dataLoaded и отобразите основное содержимое приложения.

aBiscuit 03.10.2019 10:52

Другие вопросы по теме