在设置 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
  }

  // other methods and variables

  return {
    .....
  }
}

vue 文件内部

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

问题出在 vue 组件中，exportData 中的值未定义，当导出为异步时，出现错误 fetchEvents is not a function。如果不是异步的，效果很好。这里有什么解决方法？？

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()
  }
}