vue mounted 中外部异步函数的问题

Question

有什么问题

我想创建一个外部异步函数，并将它返回的值分配给状态值。如您所见，我还向该函数传递了 firebase 引用和存储，因此我不必在 js 文件中再次导入它。我想要的另一件事是 将 false 分配给 state.isLoading，但仅在异步函数完成后 。控制台只给我这个

承诺{“待定”} 的：“完成” 的 : 数组 [ {…} ]

所以有我的数组，但我不知道如何获取它的值。

感谢您的帮助！

Vue 代码

import {CreateUserFoldersList} from "@/path";
import {useStore} from 'vuex'
import {onMounted, reactive} from "vue";
import {useRouter} from 'vue-router'
import fire from "@/utilities/fire";

export default {
  name: "FlashcardsBrowser",
  setup() {

这里我想把函数的返回值放到状态对象的var中

    onMounted(() => {
      state.Folders = CreateUserFoldersList(store.state.UserData.AuthUser.uid, fire)
      state.isLoading = false
    })

    const router = useRouter()
    const store = useStore()


    const state = reactive({
      Folders: [],
      isLoading: true,
      isShowingModal: false,
    })
    return {
      state
    }

外部函数

export async function CreateUserFoldersList(storeUserData, firebaseRef) {
    let mainFolder;
    await firebaseRef.database().ref(`UserData/${storeUserData}/Folders`).once('value').then((snapshot) => {
         const data = snapshot.val()

         let Folders = []
         if (data) {
             Object.keys(data).forEach(key => {
                 Folders.push({
                     id: key,
                     name: data[key].name,
                     length: data[key].length
                 })
             })
         }
        mainFolder = Folders
     })
    return mainFolder
}

如果能帮到您，我将不胜感激！

Answer 1

state.Folders = await CreateUserFoldersList(store.state.UserData.AuthUser.uid, fire)

Answer 2

像这样尝试等待函数：

 onMounted(async () => {
    state.Folders = await CreateUserFoldersList(store.state.UserData.AuthUser.uid, fire)
    state.isLoading = false
 })

vue mounted 中外部异步函数的问题

Problem with external async function in vue mounted

javascript

async-await

vue.js

vue-component

vuejs3

有什么问题

Vue 代码

外部函数

如果能帮到您，我将不胜感激！