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

Posted 2023-02-22

【中文标题】vue 3在应用程序启动时加载其他功能之前运行功能并等待数据

【英文标题】：vue 3 run function and await data before other functions are loaded on app start up

【发布时间】：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 来存储我的本地商品。

【参考方案1】：

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

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

returntoken

在 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);