Comment utiliser le code réutilisable d'un autre fichier dans l'API de composition de Vue 3 ?

Question

J'ai créé du code réutilisable dans dateTime.js :

import { ref, calculated, watch } from 'vue';
importer * en tant que dayjs depuis 'dayjs' ;

exporter la fonction par défaut dateTime() {

    const newDateTimeString = ref(null);

    fonction showDateTime (données) {
        const dateTime = dayjs(data).format('JJ-MM-AAAA')
        newDateTimeString.value = dateTime ;
    }

    retour {
        nouvelleDateTimeString,
        showDateHeure
    }
}</pré>
<p><strong>Le code dans dateTime.js est appelé dans Table.vue : </strong></p>
<p>Question : Comment puis-je le faire fonctionner ? Je souhaite utiliser <code>{{ showDateTime(scope.row[itemIn.field]) }}</code> dans le modèle. Il me semble que cela devrait finalement déclencher la fonction <code>showDateTime</code> dans <code>dateTime.js</code>. </p>
<p>Qu’ai-je fait de mal ? Code d'erreur : <code>Non capturé (promis) TypeError : Object(...) n'est pas une fonction</code>, qui fait référence à <code>const { showDateTime } = useDateTime();</code> ; </p>
<pre class="brush:php;toolbar:false;"><template v-else-if="itemIn.type == 'dateTime'">
    {{ showDateTime(scope.row[itemIn.field]) }}
</modèle>

<script>
importer { ref, calculé } depuis 'vue' ;
importer {defineComponent} depuis "vue" ;
importer { useStore } depuis "vuex" ;
importer { useDateTime } depuis '@/composables/dateTime' ;

exporter le composant défini par défaut ({
  nom: "",
  accessoires : {
    traitementDonnées : Objet
  },
  Composants: {
    Drapeau
  },
  émet : ["unique", "rafraîchir"],

  configuration (accessoires, {emit}) {
    
    const { showDateTime } = useDateTime();
    const magasin = useStore()

    fonction setStatus (id, route) {
        objet const = {
            je l'ai fait,
            itinéraire : itinéraire
        }
        return store.getters.getStatus(objet);
    }

    retour {
      getScope,
      setUniqueId,
      getClass,
      obtenirLargeur,
      naviguerPagination,
      setStatus,
      setTag,
      showDateHeure
    } ;
  }
});

</script>

Answer 1

Lorsque vous utilisez export default导出useDateTime hook时，你必须在导入时不使用{ } :

import useDateTime from '@/composables/dateTime';