如何确保 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>

当前，当内部模板运行是其 create() 方法时，存在竞争条件，其中 localStorage.mySpecialVariable 的值为 null。有时它在那里，有时它不在那里，除非我运行页面两次。

如何确保外部主模板代码在继续之前完成？

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 文件并运行在执行每条路由之前调整我的代码，这正是我需要它做的。

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(() => {
        
    });
}

那么上面的函数将运行并在任何页面特定代码运行之前完成，这是我提出的主要目标和问题。我希望其他人觉得这有帮助。

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

How To Ensure Vue Main Template Create Method Finishes Before Router-View Inner Template Create Method Starts

templates

async-await

vue.js

viewcontroller-lifecyle