뷰 / 라우터 : 어떻게 제대로 페이지의 콘텐츠를 렌더링하기 전에 데이터를 가져올 수 있습니까?

거미 :

나는 뷰 라우터와 Axios의와 Nuxt을 사용하고 있습니다. 나는 뷰 라우터가 호출이 환상적인 기능이 볼 탐색 가드를 .

불행하게도, 아래의 예에서, 내 beforeRouteEnter()함수가 호출되지만 내 매뉴얼 전에 출구 스위치 페이지에 보이는 next()메소드가 호출됩니다 fetchPageData(next).

여기에 올바른 패턴은 무엇인가?

export default {
    beforeRouteEnter (to, from, next) {
        next(vm => {
            vm.fetchPageData(next);
        });
    },
    methods: {
        async fetchPageData(next) {
            const result = await this.$axios.$get('/api/v2/inventory/3906?apiKey=f54761e0-673e-4baf-86c1-0b85a6c8c118');
            this.$store.commit('property/setProperty', result[0]);
            next();
        }
    }
}

내가 처음으로 호출 할 수 있다고 가정 next(vm => {})나는 (대부분 잘못) 다음 콜백하기 전에) (페이지 변화의 결과로 실행을 계속할 수 비동기 적으로 실행됩니다.

마이클 왼쪽 :

당신은 전화, 맞아 next()두 번째 것은 올바르지 않습니다. 에 첫 번째 호출 next()라우터를 말한다 "당신은 활성 성분 (/ 마운트 / 생성 렌더링)과 구성 요소가 생성 될 때, 내 콜백을 호출 변경을 계속 진행 할 수 있습니다, 계속 (인수로 전달을하는 next())

당신의 지침을 따를 수 있습니다 데이터 페칭 - 탐색하기 전에 가져 오는 문서 예. 제 통화 데이터를 인출 next()한 후하지만 그 성분 자체 로직을 가져올 추출하기 위해 필요하다.

일반적으로 나는 데이터를 가정하는 방식의 모든 구성 요소가 첫번째 렌더링 모든 비동기는 결의를 호출 할 때 나중에오고있다 여기에없는 쓰기 쉽게 찾을 수 ...

UPDATE 옵션을 가져 오는 Nuxt 비동기 데이터

당신이 Nuxt.js를 사용하는 것처럼 어떻게 데이터 비동기 사용하는 몇 가지 다른 옵션이 있습니다 :

1. nuxtServerInit - 서버 측에서 데이터를 클라이언트 측 Vuex 저장소를 채우기 위해 유용
2. 방법을 가져 오기 - 페치 방법은 페이지를 렌더링하기 전에 가게를 채우는 데 사용됩니다. 그것은처럼 asyncData그 구성 요소 데이터를 설정하지 않습니다 제외하고는 방법 당신이 저장소에 데이터를 입력 할 수 있습니다. 에서 약속 반환 fetch이 구성 요소를 렌더링하기 전에 방법은 결의에 약속에 대한 Nuxt 대기를 만들 것입니다 ...
3. asyncData의 방법은 데이터를 가져 오기 및 구성 요소의 내부에 넣어 사용할 수 있습니다 data. 에서 약속 반환 asyncData이 구성 요소를 렌더링하기 전에 방법은 결의에 약속에 대한 Nuxt 대기를 만들 것입니다 ...

export default {
  async fetch({store, $axios}) {
    const result = await $axios.$get('/api/v2/inventory/3906');
    store.commit('property/setProperty', result[0]);
  }
}