Nuxt.js nuxtServerInit 및 Vuex를 사용하여 데이터 서버를 로드하는 중

Nuxt.js nuxtServerInit 및 Vuex를 사용하여 데이터 서버를 로드하는 중

현재 저는 구인신청을 위한 데이터 저장 작업을 하고 있습니다.백엔드는 Larabel을 사용하고 프런트엔드는 Nuxt.js를 사용합니다.Nuxt는 처음이라 다음 문제에 대해 고민하고 있습니다.

저는 뉴잡이라고 하는 새로운 구인 페이지를 가지고 있습니다.그리고 주(州)를 관리하기 위해 jobs.js라는 가게도 만들었어요

새 직장에서요.vue i에는 양식이 시작되기 전에 목록에 렌더링해야 하는 데이터가 포함된 양식이 있습니다.모든 나라의 리스트 등폼에서 선택할 수 있게 되어 있습니다.

이 시점에서는 새로운 작업의 내보내기 기본값 내에서 비동기 데이터를 사용하고 있습니다.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))
},

Nuxt.js 문서의 nuxtServerInit API 참조:

nuxtServerInit 액션이 스토어에 정의되어 있는 경우 Nuxt.js는 컨텍스트와 함께 호출합니다(서버측에서만).

즉, 이것은 다음에서만 사용할 수 있는 예약 스토어 액션입니다.store/index.js파일 및 정의된 경우 요청된 경로를 렌더링하기 전에 서버 측에서 호출됩니다.

오직.asyncData그리고.fetch메서드는 페이지 내에서 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/53083529/nuxt-js-loading-data-serverside-with-nuxtserverinit-and-vuex