Wie verwende ich wiederverwendbaren Code aus einer anderen Datei in der Kompositions-API von Vue 3?

Question

Ich habe wiederverwendbaren Code in dateTime.js erstellt:

import { ref, computed, watch } from 'vue';
* als Dayjs aus 'Dayjs' importieren;

Standardfunktion dateTime() exportieren {

    const newDateTimeString = ref(null);

    Funktion showDateTime(data) {
        const dateTime = dayjs(data).format('TT-MM-JJJJ')
        newDateTimeString.value = dateTime;
    }

    zurückkehren {
        newDateTimeString,
        showDateTime
    }
}

Der Code in dateTime.js wird in Table.vue aufgerufen:

Frage: Wie sorge ich dafür, dass es funktioniert? Ich möchte {{ showDateTime(scope.row[itemIn.field]) }} verwenden. Es scheint mir, dass dies letztendlich die Funktion showDateTime in dateTime.js auslösen sollte.

Was habe ich falsch gemacht? Fehlercode: Uncaught (in versprochen) TypeError: Object(...) ist keine Funktion, die sich auf const { showDateTime } = useDateTime(); ;

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

<script>
import { ref, berechnet } aus 'vue';
import { defineComponent } from „vue“;
import { useStore } aus „vuex“;
import { useDateTime } from '@/composables/dateTime';

Standard exportieren defineComponent({
  Name: "",
  Requisiten: {
    processingData: Objekt
  },
  Komponenten: {
    Flagge
  },
  gibt aus: ["unique", "refresh"],

  setup(props, {emit}) {
    
    const { showDateTime } = useDateTime();
    const store = useStore()

    Funktion setStatus(id, route) {
        const-Objekt = {
            Ich tat,
            Route: Route
        }
        return store.getters.getStatus(object);
    }

    zurückkehren {
      getScope,
      setUniqueId,
      getClass,
      getWidth,
      navigierenPaginierung,
      setStatus,
      setTag,
      showDateTime
    };
  }
});

</script>

Answer 1

当你使用export default导出useDateTime hook时，你必须在导入时不使用{ }：

import useDateTime from '@/composables/dateTime';