vuex-persist를 사용하는 Nuxt.js - 페이지 새로 고침 시 비동기 데이터에서 지속 상태를 사용할 수 없음

vuex-persist를 사용하는 Nuxt.js - 페이지 새로 고침 시 비동기 데이터에서 지속 상태를 사용할 수 없음

첫 페이지 새로 고침 시 asyncData 함수는 지속 상태를 가져올 수 없습니다.다른 NuxtLink를 팔로우하여 이 페이지로 돌아가면 그 사이에 상태가 변환되지 않은 상태에서 데이터가 표시됩니다.즉, 첫 번째 로드/갱신 시 서버 측에서 지속 상태를 사용할 수 없습니다.Local Storage는 관련 상태 항목을 유지하도록 선택하는 곳입니다.

비동기 데이터를 사용하는 페이지 구성 요소:

  asyncData({ app, params, store }) {
  //its not available upon first refresh, but is after following a random nuxtlink and going back
    const cartProducts = store.getters.getCartProducts 
},

store/index.display는 간단합니다.안타깝게도 첫 페이지 새로 고침 시 asyncData 상태는 완전히 비어 있습니다.

  getCartProducts(state) {
    return state.cart.products
  },

Github Readme에서 권장하는 'client' 모드로 vuex-persist.js를 올바르게 Import함

import VuexPersistence from 'vuex-persist'
/** https://github.com/championswimmer/vuex-persist#tips-for-nuxt */

export default ({ store }) => {
  window.onNuxtReady(() => {
    new VuexPersistence({
      key: 'cartStorage'
      /* your options */
    }).plugin(store)
  })
}

비동기 데이터를 호출하기 전에 로컬 스토리지의 관련 스토어 조건이 유지되도록 하려면 어떻게 해야 합니까?

당신은 이것을 못합니다.그건 불가능해.거기에는 없다localstorage서버상에 있습니다.그리고.asyncData첫 번째 로드/로드 시 서버에서 실행됩니다.그래서 데이터를 얻을 수 있는 방법은 없습니다.asyncData부터localstorage서버상에 있는 것도 이론상입니다.

언급URL : https://stackoverflow.com/questions/57031005/nuxt-js-with-vuex-persist-persisted-state-not-available-in-asyncdata-upon-page