반응형
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
반응형
'source' 카테고리의 다른 글
Vue: 템플릿은 키를 입력할 수 없지만 템플릿을 div로 바꿀 수 없음 - 래퍼 div 요소가 없는 v-for, 중첩된 v-for 루프가 필요합니다. (0) | 2022.08.18 |
---|---|
외부에서 처리되는 요소를 Vue.js에 추가하시겠습니까? (0) | 2022.08.18 |
Vuex가 개별 돌연변이에 가입하다 (0) | 2022.08.18 |
Vue-i18n이 vuex에 정의되어 있지 않습니다. (0) | 2022.08.18 |
Vue 라우터: TypeError: 정의되지 않은 속성 '$createElement'를 읽을 수 없습니다. (0) | 2022.08.18 |