source

NUXT: 비동기 가져오기를 혼합으로 사용하여 덮어쓸 페이지 데이터에 액세스하는 방법

factcode 2022. 8. 18. 23:26
반응형

NUXT: 비동기 가져오기를 혼합으로 사용하여 덮어쓸 페이지 데이터에 액세스하는 방법

페이지에서 사용하고 있는 마스트헤드 컴포넌트가 있는데, 페이지 변경 시 파기되기 때문에 루트 변경 중에도 해당 컴포넌트를 계속 사용할 수 있도록 레이아웃으로 이동하기로 결정했습니다(그리고 그에 따라 애니메이션/전환을 할 수 있습니다).VueX를 사용하여 Masthead의 내용(이미지, 복사 등)을 업데이트하고 있습니다.

현재는 모든 페이지에서 비동기 페치를 사용하여 스토어에 적절한 콜을 발신하고 있습니다(마스트헤드를 갱신 또는 숨깁니다).

페치를 수동으로 배치하지 않고 최종적으로 믹스인으로 이동하여 각 페이지로 Import하고 싶습니다.문제는 mixin을 사용하여 호출하기 전에 페이지 고유의 데이터를 가져오고 싶다는 것입니다.mixin에서는 언제든지 디폴트로 설정할 수 있지만 페이지 내에서 덮어쓰기를 할 경우 fetch()에서 페이지 data() 또는 asyncData()에 액세스할 수 없습니다.

fetch()의 페이지 고유 데이터에 액세스하는 가장 좋은 방법은 무엇입니까?

내 믹스인:

export default {
  data() {
     return {
        masthead: false
     }
  },
  async fetch({ state }) {
    await state.commit('masthead/UPDATE_MASTHEAD', this.masthead);
  }
}

페이지: '~/mixins/masthead'에서 마스트헤드 가져오기

export default {
  name: 'homepage',
  mixins: [masthead]
  data() {
     // Why can't I access this in fetch
     return {
       masthead: true
     };
  },
  asyncData() {
     // Why can't I access this in fetch?
     return {
       masthead: true
     };
  },

감사합니다!

언급URL : https://stackoverflow.com/questions/52561647/nuxt-using-async-fetch-as-mixin-how-to-access-page-data-to-overwrite

반응형