vuex에서 API의 데이터를 올바르게 가져 오는 방법은 무엇입니까?

Question

내 Vue.js 응용 프로그램에서 일하고 있는데 vuex-router-sync가있는 API를 통해 데이터를 가져 오는 데 문제가 있습니다.

모든 튜토리얼이나 샘플에서 보았 듯이 created 구성 요소 후크에 저장 작업을 전달하는 것이 일반적입니다. 제 경우에는 옵션이 아닌 것 같습니다. 이유는 다음과 같습니다.

라우팅에 표준 vue-router를 사용하고 페이지 사이를 탐색 할 때 내 콘텐츠뿐만 아니라 내 사이드 ​​바 및 헤더도 변경해야합니다. . 따라서 나는

routes: [{ 
     path: '/', 
     components: { 
     page: Home, 
     sidebar: GeneralSidebar, 
     header: HomeHeader 
     } 
    }, { 
     path: '/game/:id', 
     name: 'game', 
     components: { 
     page: Game, 
     sidebar: GameSidebar, 
     header: GameHeader 
     } 
    }] 

로, 등을 명명 된 라우터보기 개념을 구현하지만, 게임, GameHeader 및 GameSidebar 현재 선택된 게임 같은 게터를 공유해야합니다. 어떤 구성 요소 중 하나가 데이터 가져 오기 작업을 파견해야 할지를 결정하는 것은 불가능합니다.

나는 beforeEnter에, 라우터 자체에 후크하려고했으나 ( /game/1에서 /game/2에 내 경우) 같은 경로를 탐색하면 beforeEnter을 유발하지 않는 문제를 직면했다.

내가 연결할 수있는 방법이 있습니까 경로 탐색? 또는 가져 오기 작업을 파견하는 데 더 좋은 패턴일까요?

미리 감사드립니다.

Answer 1

이렇게하는 방법에는 여러 가지가 있습니다. 예를 들어 라우트 변경으로로드 된 일부 구성 요소 내부의 데이터를 가져올 수 있고 변경을 전달하여 데이터를 vuex에 설정 한 후에 사용할 수 있습니다. 이것은 완벽하게 일을합니다. 모든 구성 요소 내부에서 데이터를 가져올 수있는 방법은 거의 없습니다. Vue 라이프 사이클 후크 중 하나에서 데이터를 가져올 수 있습니다. 여기를 한번 보시기 바랍니다 https://router.vuejs.org/en/advanced/data-fetching.html

가끔은 어떤 경로 변경과 관련된 데이터가 필요합니다. 동일한 접근법을 사용할 수 있습니다. Vue 앱이로드 될 때 약간의 요청을 할 수 있습니다.