vuex의 API에서 데이터를 올바르게 가져오는 방법

vuex의 API에서 데이터를 올바르게 가져오는 방법

나는 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
      }
    }]

그러나 게임, 게임헤더, 게임사이드바는 현재 선택된 게임과 동일한 게터를 공유해야 한다.그 구성 요소들 중 어떤 것이 데이터를 가져오기 위한 작업을 파견해야 하는지를 결정하는 것은 불가능하다.

나는 라우터 자체를 훅으로 연결하려고 했다.beforeEnter그러나 같은 경로 사이를 항해하는 것은 문제에 직면했다./game/1로/game/2)이 트리거되지 않음beforeEnter.

항로 탐색을 할 수 있는 방법이 없을까?아니면 더 좋은 패턴이 있을 수도 있지?

미리 고마워!

이렇게 하는 데는 여러 가지 방법이 있다.예를 들어 경로 변경에 의해 로드된 일부 구성 요소 내부와 변경 사항을 전송하여 vuex에 설정된 데이터를 가져올 수 있다.이것은 그 일을 완벽하게 해낸다.또한 구성 요소 내부에 데이터를 가져올 수 있는 몇 가지 방법이 있다는 점을 유념하십시오. Vue 라이프사이클 후크에 연결할 수 있다.여기를 보십시오. https://router.vuejs.org/en/advanced/data-fetching.html

또한 때로는 경로 변경에 앞서 약간의 데이터가 필요할 때도 있으며 여기서도 동일한 접근 방식을 사용할 수 있다. Vue 앱이 로드될 때 몇 가지 요청을 하십시오.

참조URL: https://stackoverflow.com/questions/41830406/how-to-properly-fetch-data-from-api-in-vuex