使用導出的值在Vue Composition API的設定中

Question

在一個普通的js檔案中，程式碼如下：

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
  }

  // 其他方法和變數

  return {
    .....
  }
}

在vue檔中：

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

問題是在vue元件中，從exportData取得的值是undefined，當匯出是非同步的時候，會出現fetchEvents不是一個函數的錯誤。如果不是異步的話，可以正常工作。這裡有什麼解決方法？

Answer 1

你可以嘗試在計畫的js檔案中宣告fetchEvents和isEventActive方法，而無需將其包裝在任何函數中

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

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

並將它們匯出為

export {fetchEvents, isEventActive};

現在使用它們

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