(Vuex 스토어의) 비동기 데이터가 로드되기 전에 루팅을 방지하려면 어떻게 해야 합니까?

(Vuex 스토어의) 비동기 데이터가 로드되기 전에 루팅을 방지하려면 어떻게 해야 합니까?

애플리케이션에서는 루팅을 시작하기 전에 VueX 스토어에 데이터를 로드해야 합니다(예: 사용자 세션).

경기 조건의 예는 다음과 같다.

// In routes definition
{
  name: 'login',
  path: '/login',
  component: Login,
  meta: {
    goToIndexIf: () => store.getters['auth/loggedIn']
  }
}

이 상황에서는 사용자가 서버로부터 수신되기 전에 루트 가드가 실행될 수 있습니다.

조건부 렌더링을 사용해도 루트 가드가 실행되거나 실행은 도움이 되지 않습니다.<router-view v-if="storeReady">참조할 수 있습니다.

비동기 데이터상에서 모든 루팅을 대기시키려면 어떻게 해야 합니까?

해결책은 간단합니다.를 추가합니다.init또는 매장 내 관련 부품과 동등한 Vuex를 사용할 수 있습니다.
응용 프로그램에 절대적으로^* 필요한 모든 데이터 요청 중 가 반환됩니다.

init ({ dispatch }) {       // Could also be async and use await instead of return
  return Promise.all([
    dispatch('getUserSession'), // Using another action
    dispatch('auth/init'),      // In another module
    fetch('tehKittenz')         // With the native fetch API
    // ...
  ])
}

위의 코드에서는 다음을 반환하는 모든 것을 사용할 수 있습니다.Promise.

다음으로 라우터에 글로벌네비게이션가드를 작성하면 됩니다.beforeEach.
이 경비원은 A가 가게와의 약속을 기다린다.

// In your router initialization code
const storeInit = store.dispatch('init')

// Before all other beforeEach
router.beforeEach((to, from, next) => {
  storeInit.then(next)
    .catch(e => {
      // Handle error
    })
})

이렇게 하면 스토어가 완전히 로드되기 전에 라우팅이 이루어지면 라우터는 단순히 대기합니다.
그 후에 라우팅이 발생하면 약속은 이미 상태가 되어 라우팅이 진행됩니다.

라우팅이 데이터를 기다리는 동안 빈 화면이 표시되지 않도록 조건부 렌더링과 같은 것을 사용하는 것을 잊지 마십시오.

---

: 데이터를 가져오는 동안 모든 라우팅 및 네비게이션을 수행할 수 없습니다^*.조심하세요.

이 질문이 처음 제기된 이후 vue-router(v3.5.1)에서는 이와 같은 동작을 실행하고 첫 번째 경로에서만 실행되는 초기 네비게이션이 확인되었습니다.

비교하다from로.VueRouter.START_LOCATION.

import VueRouter from 'vue-router'

const router = new VueRouter({
  // ...
})

router.beforeEach((to, from, next) => {
  if (from === VueRouter.START_LOCATION) {
    // initial navigation, handle Vuex initialization/hydration.
    initalizeOrWait().then((isLoggedIn) => {
      // handle navigation or pass to guard how it fits your needs here etc.
      next();
    });
  } else {
    next();
  }
})

제가 잘 해낸 것은 제 Vue 인스턴스(새로운 Vue({...}))를 .then() "Promise" 안에 포장한 것입니다.이 약속은 모든 것이 정상일 경우 해결되며 오류가 발생했을 때 오류를 해결할 수 있으므로 오류에 따라 vue 인스턴스를 조건부로 렌더링할 수 있습니다.

여기서 비동기 함수를 호출하여 스토어가 로드될 때까지 기다렸다가 앱을 초기화합니다.

토큰을 사용하여 데이터를 가져오는 my async 함수

이렇게 하면 가져온 스토어 데이터에 대해 작업하는 루트 가드가 올바르게 작동할 수 있습니다.

도움이 되었으면 좋겠고 영어가 서툴러서 미안해 :)

언급URL : https://stackoverflow.com/questions/51495461/how-to-prevent-any-routing-before-some-async-data-in-vuex-store-has-loaded