Vuex 작업이 완료되기 전에 Vue 라이프 사이클이 진행되지 않도록 하는 방법은 무엇입니까?

Vuex 작업이 완료되기 전에 Vue 라이프 사이클이 진행되지 않도록 하는 방법은 무엇입니까?

어플리케이션에서는 나머지 어플리케이션이 시작되기 전에 3개의 Vuex 모듈을 초기화하려고 합니다.단, 어떤 시도를 해도 초기화를 실행하는 Vue 인스턴스의 라이프 사이클 후크 내의 코드는 3개의 모듈이 초기화를 완료하기 전에 넘어갑니다.

초기화를 실행하는 Vuex 액션의 코드 주위에 약속을 추가했습니다.따라서 호출 라이프 사이클 훅에 있는 액션에 대기할 수 있지만 동작하지 않습니다.

Axios를 사용하는 Vuex 코드 샘플을 살펴보았는데, 이와 비슷한 코드를 만들어야 하지만 성공하지 못했습니다.

"Promise.all(...)"을 사용하여 "beforeCreate" 라이프 사이클 후크에서 초기 호출을 시도했지만 여전히 해결되지 않았습니다.

메인 Vue 인스턴스의 코드는 다음과 같습니다.

new Vue({
  router,
  store,
  async beforeCreate() {
    await this.$store.dispatch('init')
  },
  render: h => h(App)
}).$mount('#app')

Vuex 스토어는 3개의 모듈로 구성되어 있으며 모두 'init' 액션이 있습니다.3개의 모듈의 동작 코드는 모두 동일합니다.아래 코드에 "XXX"가 있는 경우 모듈별로 약간 다른 콜이 발생합니다.

  init: ({commit, dispatch}) => {
    return new Promise((resolve, reject) => {
      console.log('Start of init of XXX');
      Axios.get(`api/xxx`).then(response => {
        return response.data;
      }, error => {
        console.log('An error occured: ', error);
        reject(error);
      }).then(data => {
        const result = [];
        for (let key in data) {
          result.push(data[key]);
        }

        console.log('The API call resulted in ' + result.length + ' lines of code');

        resolve(result);
        commit('ADD_XXX', result);
      })
    })
  }

3개의 초기 액션 호출이 완전히 완료될 때까지(즉, 모든 약속이 이행될 때까지) "before Create" 코드가 계속 대기합니다.

액션이 개시되는 것을 알 수 있습니다(「Start of init」가 표시됩니다)."콘솔에 로그인합니다.)그런데 어느 하나의 애플리케이션컴포넌트의 mounted() 함수의 코드가 실행되기 시작하는데, 스토어가 완전히 초기화되지 않으면 제대로 작동하지 않기 때문에 실행되어서는 안 됩니다.

안 요.beforeCreate 함으로써async. '일시정지'를 ' 수 await중단되지 계속됩니다.Vue는 수익률에 전혀 주의를 기울이지 않기 때문에 약속은 무시되고 라이프 사이클은 중단 없이 계속됩니다.수은, 「」에 를 추가하는 것입니다.data원하는 효과를 얻을 수 있도록 조작합니다.

new Vue({
  router,
  store,
  data () {
    return {
      ready: false
    }
  },
  async beforeCreate() {
    await this.$store.dispatch('init')
    this.ready = true
  },
  render (h) {
     if (this.ready) {
       return h(App)
     }
  }
}).$mount('#app')

을 새로 init악시에 의해 작성된 연쇄 약속을 반환하기만 하면 됩니다.

업데이트:

방법이 있는데, '부르다'라고 부르는 .mount.

new Vue({
  router,
  store,
  async beforeCreate() {
    await this.$store.dispatch('init')
    this.$mount('#app')
  },
  render: h => h(App)
})

언급URL : https://stackoverflow.com/questions/56917250/how-to-stop-vue-life-cycle-from-moving-on-before-vuex-actions-have-completed