Identifying the Issue
I encountered an issue while trying to create an external async function and assign its return value directly to a state variable. In addition, I passed firebase reference and store to this function to avoid importing them again in the JavaScript file. Another requirement was to set the state.isLoading to false only after the completion of the async function. However, when I checked the console, it showed:
Promise { "pending" } : "fulfilled" : Array [ {…} ]
This indicates that my array is present, but I am unsure how to access its values.
Thank you for your assistance!
Vue Code
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() {
- I want to assign the returned value from the function to a variable in the state object
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
}
External Function
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
}