vue.js - 如何确保 Vue 主模板创建方法在 Router-View 内部模板创建方法开始之前完成

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

如果应用程序依赖于 API 响应，我会推迟安装应用程序，直到收到响应：

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

Answer 2

因此，经过大量的测试和研究，我最终更新了 router.js 文件并在执行每条路由之前运行了我的代码，这正是我需要它做的事情。

路由器.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(() => {
        
    });
}

所以发生的情况是，上面的函数将在任何特定于页面的代码运行之前运行并完成，这是我要问的主要目标和问题。我希望其他人会觉得这很有帮助。