Vue 3 のコンポジション API で別のファイルの再利用可能なコードを使用するにはどうすればよいですか?

Question

dateTime.js に再利用可能なコードを作成しました:

import { ref, computed, watch } from 'vue';
import * as dayjs from 'dayjs';

デフォルト関数のエクスポート dateTime() {

    const newDateTimeString = ref(null);

    関数 showDateTime(data) {
        const dateTime = dayjs(data).format('DD-MM-YYYY')
        newDateTimeString.value = 日付時刻;
    }

    戻る {
        newDateTimeString、
        showDateTime
    }
}

dateTime.js のコードは Table.vue で呼び出されます。

質問: どうすれば機能しますか?テンプレートで {{ showDateTime(scope.row[itemIn.field]) }} を使用したいと考えています。これにより、最終的に dateTime.js の showDateTime 関数がトリガーされるはずだと思われます。

何を間違えたのでしょうか?エラー コード: Uncaught (in Promise) TypeError: Object(...) は、const { showDateTime } = useDateTime(); ; を参照する関数 ではありません。

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

<スクリプト>
import { ref, computed } from 'vue';
「vue」からインポート {defineComponent};
「vuex」からインポート { useStore };
import { useDateTime } から '@/composables/dateTime';

デフォルトのエクスポートdefineComponent({
  名前： ""、
  小道具: {
    処理データ: オブジェクト
  }、
  コンポーネント: {
    フラグ
  }、
  発行: ["ユニーク", "リフレッシュ"],

  setup(props, {emit}) {
    
    const { showDateTime } = useDateTime();
    const ストア = useStore()

    関数 setStatus(id, ルート) {
        const オブジェクト = {
            やった、
            ルート: ルート
        }
        戻りstore.getters.getStatus(オブジェクト);
    }

    戻る {
      スコープの取得、
      setUniqueId、
      getクラス、
      幅の取得、
      ナビゲートページネーション、
      セットステータス、
      セットタグ、
      showDateTime
    };
  }
});

</script>

Answer 1

exportdefaultexportuseDateTimeフックを使用する場合は、{ }: を使用せずにインポートする必要があります。 リーリー