vuex / nuxtClientInit용 후크가 생성되었습니까?

vuex / nuxtClientInit용 후크가 생성되었습니까?

어떻게 하면 가장 좋은지 궁금해서nuxtClientInit가능한 한 빨리 클라이언트에 Auth State를 로드하여 서버 측이 아닌 vuex 스토어에 저장하려고 합니다.Vuex에 이런 게 있었으면 좋겠어요.created컴포넌트 훅을 사용하지만 제가 아는 바로는 없습니다.

어떻게 하면 이런 행동을 할 수 있을까요?레이아웃에서 액션을 호출하는 것도 한 방법이지만, 그게 최선의 방법인가요?

nuxt 팀이 nuxtClientInit 기능을 개발하고 있는 것은 알고 있습니다만, 출시되기 전에 직접 만들 수 있습니다.요청이 있을 때 nuxt가 수행하는 워크플로우를 이해하려면 여기에서 라이프사이클을 참조하십시오.이는 nuxtServerInit이 먼저 호출되고 다음으로 미들웨어가 호출됨을 나타냅니다.이 미들웨어에서는 콜 nuxt.config.js가 처리되며 커스텀 설정이 포함됩니다.이 중 일부는 '플러그인'입니다. 이 '플러그인'은 의사 말처럼

이 옵션을 사용하면 루트 Vue.js 응용 프로그램을 인스턴스화하기 전에 실행해야 하는 JavaScript 플러그인을 정의할 수 있습니다.

따라서 스토어 액션을 호출하는 플러그인을 작성하면 로컬 스토리지를 가져와 설정할 수 있습니다.nuxt-client-init 플러그인부터 시작합니다.

//nuxt-client-init.client.js
export default async context => {
  await context.store.dispatch('nuxtClientInit', context)
}

그런 다음 플러그인을 nuxt.config.config.config에 추가합니다.

//nuxt.config.js
  plugins: [
    '~/plugins/nuxt-client-init.client.js'
  ],

여기에 명명규칙이 있는 경우 플러그인의 .client.js 부분은 이것이 클라이언트 전용 플러그인임을 nuxt에 알립니다.'{ src: '~/plugins/nuxt-client-init.js', mode: 'client' }'nuxt 2.4가 오래된 것을 정의하는 방법이기 때문에'{ src: '~/plugins/nuxt-client-init.js', ssr: false }'. 어쨌든, 이제 상점에 전화를 걸면 로컬 스토리지에서 전화를 걸어 상태 항목을 설정할 수 있습니다.

//store/index.js
export const actions = {
  nuxtClientInit({ commit }, { req }) {
    const autho = localStorage.getItem('auth._token.local') //or whatever yours is called
    commit('SET_AUTHO', autho)
    console.log('From nuxtClientInit - '+autho)
  }
}

이를 모두 활성화하기 위해 앱을 재시작해야 할 수도 있지만, 번거로운 nuxtServerInit 비즈니스 없이 Auth State를 취득하여 사용합니다.

언급URL : https://stackoverflow.com/questions/55463025/created-hook-for-vuex-nuxtclientinit