vue.js에서는 "앱 초기화" 코드를 어디에 배치할 수 있습니까?

vue.js에서는 "앱 초기화" 코드를 어디에 배치할 수 있습니까?

구체적으로는 앱이 실제로 로드되기 전에 실행되는 코드입니다.사용하고 있다vuex(사용자가 어떤 루트에 있든 관계없이) 첫 번째로 하고 싶은 것은,getUserAPI에서 현재 사용자 세부 정보를 가져오는 작업(인증되지 않은 경우 리디렉션)입니다.

내 안에 넣으면App.vue mounted컴포넌트, 너무 늦은 것 같은데?부모보다 자식 부품이 먼저 로드되지 않나요?

내가 맞히면 어플리케이션이 초기화되기 전에 뭔가 해야 합니다.그러기 위해서는 그냥 퍼포먼스만 하면 됩니다.async앱 초기화 메서드입니다.예를 들면 다음과 같습니다.

function initializeApp (vueCreated) {
  return new Promise((resolve, reject) => {
    switch (vueCreated) {
      case false: // "prevue" initialization steps
        console.log('vue not yet created, prevue steps happens')
        // ...
        setTimeout(_ => resolve(), 3500) // async call
        break;
      case true: // we can continue/prepare data for Vue
        console.log('vue created, but waiting for next initialization steps and data')
        // ...
        setTimeout(_ => resolve('Mounted / shown when app ready'), 3500) // async call
      }
  })
}

initializeApp(false).then(_ => {
  new Vue({
    template: '#app',
    data: {
      content: null
    },
    async created () {
      this.content = await initializeApp(true)
      this.$mount('#app')
      console.log('all inicialization steps done, data arrived, vue mounted')
    }
  })
})

당신의 질문과 관련된 기사가 도움이 될 수 있다는 것을 발견했습니다.링크

사용하시는 경우vue-router사용할 수 있습니다.beforeEach인증되지 않은 사용자의 일부 루트를 방지합니다.

여기서 더 읽을 수 있습니다.

여기서 막히면 라우터에서 시도한 코드를 입력합니다.

내비게이션 가드 사용의 좋은 예이기도 합니다.

행운을 빕니다.

언급URL : https://stackoverflow.com/questions/57544329/in-vue-js-where-can-i-place-app-initialization-code