Bagaimana untuk menggunakan kod boleh guna semula daripada fail lain dalam API komposisi Vue 3?

Question

Saya mencipta kod boleh guna semula dalam dateTime.js:

import { ref, computed, watch } daripada 'vue';
import * sebagai dayjs daripada 'dayjs';

eksport fungsi lalai dateTime() {

    const newDateTimeString = ref(null);

    fungsi showDateTime(data) {
        const dateTime = dayjs(data).format('DD-MM-YYYY')
        newDateTimeString.value = dateTime;
    }

    kembali {
        newDateTimeString,
        showDateTime
    }
}

Kod dalam dateTime.js dipanggil dalam Table.vue:

Soalan: Bagaimana cara saya membuatnya berfungsi? Saya mahu menggunakan {{ showDateTime(scope.row[itemIn.field]) }} Nampaknya ini akhirnya akan mencetuskan fungsi showDateTime dalam dateTime.js.

Apa salah saya? Kod ralat: Tidak ditangkap (dalam janji) Ralat Jenis: Objek(...) bukan fungsi, yang merujuk kepada const { showDateTime } = useDateTime(); ;

<template v-else-if="itemIn.type == 'dateTime'">
    {{ ShowDateTime(scope.row[itemIn.field]) }}
</template>

<skrip>
import { ref, computed } daripada 'vue';
import { defineComponent } daripada "vue";
import { useStore } daripada "vuex";
import { useDateTime } daripada '@/composables/dateTime';

eksport lalai defineComponent({
  nama: "",
  alat peraga: {
    processingData: Objek
  },
  komponen: {
    Bendera
  },
  memancarkan: ["unik", "refresh"],

  persediaan(props, {emit}) {
    
    const { showDateTime } = useDateTime();
    kedai const = useStore()

    fungsi setStatus(id, laluan) {
        objek const = {
            saya telah lakukan,
            laluan: laluan
        }
        return store.getters.getStatus(objek);
    }

    kembali {
      getScope,
      setUniqueId,
      getClass,
      getWidth,
      navigasi penomboran,
      setStatus,
      setTag,
      showDateTime
    };
  }
});

</script>

Answer 1

Apabila anda menggunakan export default导出useDateTime hook时，你必须在导入时不使用{ }:

import useDateTime from '@/composables/dateTime';