Как обеспечить завершение метода создания основного шаблона Vue до запуска метода создания внутреннего шаблона в представлении маршрутизатора

Question

У меня простая настройка с основным шаблоном Vue, например:

      <template>
  <div>
    [Other code here...]
    <v-app style="overflow-y:hidden">
      <router-view class="view"></router-view>
    </v-app>
  </div>
</template>

<script>
export default {
  methods: {
    created() {
      //I NEED THIS CODE TO FINISH FIRST BEFORE ROUTER-VIEW 
      //TEMPLATE CREATED METHOD STARTS
      await XxxService.xXXxXX()
          .then((response) => {  
            localStorage.mySpecialVariable = yyyyy;
          })
          .catch(() => {

          });
    }
  }
}
</script>

В настоящее время существует состояние гонки, при котором значение localStorage.mySpecialVariable является null когда внутренний шаблон запускает create()метод. Иногда он есть, иногда нет, если я не запустил страницу дважды.

Как я могу гарантировать, что код внешнего основного шаблона завершится, прежде чем что-либо продолжится?

Answer 1

Итак, после тонны тестов и исследований я закончил тем, что обновил файл router.js и запустил свой код перед выполнением каждого маршрута, что сделало именно то, что мне нужно.

router.sj

      router.beforeEach((to, from, next) => {    
    doTheThing(to.query.Token, next);
});

let doTheThing = async (token, next) => {    
    await apiService.doTheThing()
    .then((response) => {
        //Do Stuff Here
        next();
    })
    .catch(() => {
        
    });
}

Итак, что происходит, так это то, что функция, указанная выше, запускается и завершается до того, как запускается какой-либо код конкретной страницы, что было основной целью и вопросом, который я задавал. Я надеюсь, что кто-то еще сочтет это полезным.

Answer 2

Если приложение зависит от ответа API, я бы отложил установку приложения до получения ответа:

      // main.js
ApiService.fetch()
  .then((response) => {
    localStorage.mySpecialVariable = response.data.foo;
  })
  .catch((error) => {
    console.error(error);
  })
  .then(() => {
    // ok to mount
    new Vue({/*...*/}).$mount();
  })