Use exported values ​​in the settings of the Vue Composition API

Question

In an ordinary js file, the code is as follows:

export default async function exportData() {
  const {data} = await store
      .dispatch('fetchData')

  const { bookings } = data
  const booking = bookings.length ? bookings[0]._id : ''

  const event = {
    bookingID: booking
  }

  // Other methods and variables

  return {
    .....
  }
}

In vue file:

import exportData from './exportData'
export default {
  setup() {
    const {
      fetchEvents,
      isEventActive,
    } = exportData()
    fetchEvents()
  }
}

The problem is that in the vue component, the value obtained from exportData is undefined. When the export is asynchronous, an error that fetchEvents is not a function will appear. It would work fine if it wasn't async. What's the solution here?

Answer 1

You can try to declare the fetchEvents and isEventActive methods in the planned js file without wrapping them in any function

const fetchEvents = () => {
   //body
};

const isEventActive = () => {
     //body
};

and export them as

export {fetchEvents, isEventActive};

Use them now

import {fetchEvents,isEventActive} from 'path-to-js-file'
export default {
  setup() {
    fetchEvents()
    isEventActive()
  }
}