NuxtServerInit이 Vuex 모듈 모드에서 작동하지 않음 - Nuxt.js

NuxtServerInit이 Vuex 모듈 모드에서 작동하지 않음 - Nuxt.js

Nuxt ServerInit이 nuxt js vuex 모듈모드의 초기 페이지 렌더에서 동작하지 않습니다.하지만 클래식 모드에서는 동작합니다.다음 코드는 제가 사용한 흐름입니다.

마이 API 호출

api/CategoryApi.js

import axios from 'axios';

const HEADERS = {
    Accept: 'application/json'
};

export default {
    getCategory(payload) {
        return axios.get(`${process.env.apiUrl}/category`, {
            payload,
            headers: HEADERS
        });
    }
}

store/modules/CategoryStore.js

import api from '~/api/CategoryApi'

const state = () => ({
    categories: []
});

const getters = {
    allCategories: state => state.categories
};

const actions = {
    async nuxtServerInit({commit}) {
        const payload = {
            per_page: 6,
            page: 1
        };
        const response = await api.getCategory(payload);
        commit('setCategories', response.data.data);
    },
};

const mutations = {
    setCategories: (state, data) => {
        state.categories = data;
    }
};

export default {
    state,
    getters,
    actions,
    mutations
}

페이지/index.vue

<template>
    <div>
        <v-flex xs6 sm4 md2 class="text-xs-center my-2 pa-2" v-for="category in allCategories" :key="category.id">
            {{ category.name }}
        </v-flex>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex';

    export default {
        layout: 'default',
        computed: {
            ...mapGetters({
                allCategories: 'modules/CategoryStore/allCategories',
            })
        },
    }
</script>

제가 잘못하고 있는 건가요?:/ 올바른 구현 방법을 알고 싶습니다.

편집: Aldarund 답변에 대한 설명(다른 사람에게 도움이 될 수 있음)

편집한 스토어/모듈/카테고리 스토어.js

const actions = {
    async fetchCategories({commit}) {
        const payload = {
            per_page: 6,
            page: 1
        };
        const response = await api.getCategory(payload);
        commit('setCategories', response.data.data);
    },
};

store/index.js 추가

const actions = {
    async nuxtServerInit({dispatch}) {
        await dispatch('modules/CategoryStore/fetchCategories');
    },
};

export default {
    actions
}

문서에 기재된 바와 같이

Vuex 스토어의 Modules 모드를 사용하는 경우 (스토어/index.js에 있는) 프라이머리 모듈만 이 액션을 받습니다.거기서부터 모듈의 액션을 체인으로 해야 합니다.

따라서 nuxtServerInit을 store/index.js에 배치해야 합니다.

이 코드를 사용하여 파일index.displays를 클리어하고 실행해 보겠습니다.서버 콘솔에 메시지가 표시됩니다.

     export const actions = {

  nuxtServerInit ({ dispatch }) {
    console.log("troololollo")
  }
}

nuxt.config.drives도 사용할 수 있습니다.

module.exports = {
  //mode: 'spa',
  mode: 'universal',

nuxtServerInit을 호출할 수 있는 것은 store/index.js 내의 nuxtServerInit뿐이라는 것은 사실이 아닙니다.

가장 혼란스러웠던 것은 모듈식 접근 방식과 하나의 스토어 파일만 가지고 있는 것의 차이점이라고 생각합니다.후자의 어프로치에서는, 다음과 같은 작업을 실시합니다.

nuxtServerInit(vuexContext, {req, redirect, params})
    {
      vuexContext.dispatch('someAction',someArguments)
    }

한편 store/modules/auth.js 등의 모듈을 호출할 때는 vuexContext를 사용할 수 없으며 디스패치를 직접 사용할 수 있습니다.

nuxtServerInit({dispatch})
        {
          dispatch('someAction',someArguments)
        }

이게 나한테 효과가 있었어 도움이 됐으면 좋겠어

문서를 참조하는 이러한 질문에 대한 답변은 매우 많지만, 실제로 [index.js]에서 모듈 액션을 "체인"하는 방법에 대해서는 아무도 언급하지 않습니다."

posts.displaces.displaces

export const actions = {
  // This isn't called unless it is "chained"
  nuxtServerInit(vuexContext, context) {
    return new Promise((resolve, reject) => {
      // do a thing
      resolve()
    })
  },
}

index.displaces를 표시합니다.

import { actions as postActions } from './posts' ;

export const actions = {
  nuxtServerInit(vuexContext, context) {
    return new Promise(async (resolve, reject) => {
      // "chain" the desired method
      await postActions.nuxtServerInit(vuexContext, context)
      resolve();
    })
  }
}

나는 이 문제에 꽤 많은 시간을 할애했다.이 문제를 완전히 해결하기 위해 샘플 코드를 사용하여 결과를 요약해 보겠습니다.

네, NuxtJs의 문서에는 Vuex를 모듈로 구성하면 그렇게 되어 있습니다.그러면 모듈의nuxtServerInit호출되지 않습니다.

에 트리거하지 않는 한store/index.js.

https://nuxtjs.org/docs/2.x/directory-structure/store#the-nuxtserverinit-action

이전에 Vuex의 구조는 이렇습니다.

store/modules/user.js
store/modules/todo.js
store/index.js

이 때문에, 의 모듈을 초기화합니다.index.jsVue 3으로 이행하는 새로운 모듈 방식에도 대응하고 있습니다.index.js발동하다nuxtServerInit.

모듈 접근 방식을 위한 새로운 Vuex 구조는 다음과 같습니다.

store/user.js
store/todo.js
store/index.js

네, 모듈 패키지에서 저희 제품을 꺼내서 매장 패키지로 옮기시면 됩니다.

그럼 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 하다.todos.nuxtServerInit부에서store/index.js....

'/store/index.js'
import todos from './todos'

const state = () => ({})
const getters = {}
const mutations = {}

const actions = {
  async nuxtServerInit(vuexContext, context) {
    await Promise.all([
        todos.actions.nuxtServerInit(vuexContext, context)
    ])
  },
}

export default {
  state,
  getters,
  mutations,
  actions,
}

자 내 안에...store/todos.js....

'/store/todos.js'

...

const actions = {
  async nuxtServerInit(vuexContext, context) {
    return await vuexContext.commit('todos/setTodos', todos)
  },
}

...

Remember to use 사용하는 것을 잊지 마세요.vuexContext.commit('todos/setTodos', todos) if you're previously calling like 전에 전화하셨던 분이vuexContext.commit('setTodos', todos)....

왜냐하면 현재 고객님의 모듈은 스토어 패키지에 있고 NuxtJs는 이미 모든 패키지 Import를 생성했습니다.

Just be aware of how your 이 모든 것이 얼마나 중요한 것은this.$store.getters는, 있기 에,this.$store.getters['todos/todos'].

이렇게 하면 안 돼요?

index.displaces를 표시합니다.

export default {
    state: () => ({
        context: undefined
    }),

    actions: {
        nuxtServerInit ({ state }, ctx) {
            state.context = () => ctx;
        }
    }
};

그럼 이렇게 다른 가게에서 전화를 걸어...

rootState.context().<some object hanging off of the context>

언급URL : https://stackoverflow.com/questions/54925723/nuxtserverinit-not-working-on-vuex-module-mode-nuxt-js