【问题标题】：Problem with external async function in vue mountedvue挂载的外部异步功能问题
【发布时间】：2021-07-16 01:19:11
【问题描述】：

什么问题

我想创建一个外部异步函数并将其返回的值分配给状态值。如您所见，我也将这个函数传递给了 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
}

如果你能帮忙，我会很高兴谢谢你！

【问题讨论】：

标签： javascript vue.js async-await vue-component vuejs3

【解决方案1】：

尝试像这样等待函数：

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

【讨论】：

【解决方案2】：

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

【讨论】：