Блог

Я ищу хороший способ загрузить данные до загрузки других моих внешних функций. В моем случае у меня есть функция useToken() с const token = ref(«) Я заполняю ссылку токеном из базы данных pouchdb, ожидающим токена.значение = ‘токен bla bla’ .

У меня есть другая функция useApi(), которая требует отправки ссылки на токен в запросах заголовка axios.

В основном 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, а также с новым составным API vue 3, я могу просто использовать pouchdb для хранения своих местных товаров.

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

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

}