vue 3在应用程序启动时加载其他功能之前运行功能并等待数据答案

【问题标题】：vue 3 run function and await data before other functions are loaded on app start upvue 3在应用程序启动时加载其他功能之前运行功能并等待数据
【发布时间】：2021-03-09 16:42:26
【问题描述】：

我正在寻找一种在加载其他外部函数之前加载数据的好方法。就我而言，我有一个带有 const token = ref('') 的 useToken() 函数，我用 pouchdb 数据库中的一个令牌填充了 ref await token.value = 'bla bla token'。

我有这个其他函数 useApi() 函数，它需要在 axios 标头请求中发送令牌 ref。

基本上 useToken() 会在 app.vue 应用启动时通过 Async await 被调用。

useApi() 会在我尝试访问我的 api 服务后被调用。

我已经尝试过 app.vue

<template>
<suspense><ion-router-outlet />
</suspense> 
</template>
<script>
aysnc setup(){
 await useToken();
}

    </script>

I have also tried 

<template>
<ion-router-outlet />

</template>
<script> setup(){
 onBeforeMount(async () => {
      await initToken();
    });
}
</script>

我正在从使用效果很好的 vuex 持久状态迁移。但我想既然我使用的是 pouchdb 和 couchdb 以及 vue 3 new composition api，我不妨只使用 pouchdb 来存储我的本地商品。

【问题讨论】：

标签： pouchdb vuejs3

【解决方案1】：

所以我想我的问题是我需要将令牌移到 useToken() 之外才能工作。我相信这会使 ref 成为全局的，因为它运行一次。将 ref 放入函数中会创建 ref 的新实例

const token = ref(""); 导出函数 useToken () {

return{token}
}

在 app.vue 中

setup(){
 (async () => {
      const test = await initToken();
      console.log("%ctoken inittoken", "font-size: 15px;color:yellow", test);
    })();

      console.log("%ctoken ", "font-size: 15px;color:yellow", token);

}

【讨论】：