사용모멘트VueJS 3의 JS 전역

사용모멘트VueJS 3의 JS 전역

VueJS 2에서, 나는 순간을 즐길 수 있었다.JS 글로벌:

에main.js:

import moment from 'moment';
moment.locale('fr');
Object.defineProperty(Vue.prototype, '$moment', { value: moment });

모든 구성 요소:

{{ item.date_creation?$moment(item.date_creation).format('l'):'No date'}}

VueJS 3에서 main.js로 다음과 같이 하려고 했다.

import { createApp } from 'vue';
import moment from 'moment';
import App from './App.vue';
import './registerServiceWorker';
import router from './router';
import store from './store';

moment.locale('fr');

createApp(App).use(moment).use(store).use(router)
  .mount('#app');

하지만 사실 나는 어떤 부품에서도 "순간"을 사용할 수 없어, 각각의 "순간"을 가져와야 해.더 좋은 해결책은 없을까?문서와 튜토리얼을 많이 읽었는데, 좋은 건 하나도 안 보였어...미리 고맙다.

편집: 구성 요소에서 $moment를 사용하는 방법:

<template>
  <div class="xx" :key="'title-'+myReactiveVariable.title">
    <h1>{{ myReactiveVariable.title }}</h1>
    <div class="yy">
      {{ myReactiveVariable.content }}
    </div>
    <footer>
      Sent on
      {{ myReactiveVariable.date }}
      by {{ myReactiveVariable.author }}
      <who-is-it :idSent="id" :key="'ID-'+id">
      </who-is-it>
    </footer>
  </div>
</template>

<script>
// @ is an alias to /src
import WhoIsIt from '@/components/WhoIsIt.vue';

import {
  defineComponent, reactive, onMounted, watch, ref,
} from 'vue';

import axios from 'axios';

import { useRoute } from 'vue-router';

export default defineComponent({
  name: 'XXX',
  components: {
    WhoIsIt,
  },
  setup() {
    const route = useRoute();

    const myReactiveVariable = reactive({
      title: '',
      content: '',
      date: '',
    });

    const id = ref('');

    async function fetchArticle(id) {
      console.log(`A: ${process.env.VUE_APP_API_URL} - ${id}`);
      const res = await axios.get(`${process.env.VUE_APP_API_URL}/whoarewe/${id}`);
      id.value = res.data.author;
      myReactiveVariable.titre = res.data.title;
      myReactiveVariable.content = res.data.content;
      myReactiveVariable.date = this.$moment(res.data.date).format('l');
    }

    watch(() => route.params.id, () => {
      fetchArticle(route.params.id);
    });

    onMounted(async () => {
      fetchArticle(route.params.id);
    });

    return {
      myReactiveVariable,
      id,
    };
  },
});
</script>

글로벌 구성 속성에 순간 추가app.config.globalProperties.$moment=moment:

import { createApp } from 'vue';
import moment from 'moment';
import App from './App.vue';
import './registerServiceWorker';
import router from './router';
import store from './store';

moment.locale('fr');

let app=createApp(App);

app.config.globalProperties.$moment=moment;

app.use(store).use(router)
  .mount('#app');

그 다음에 사용하다this.$moment옵션 api가 있는 모든 하위 구성 요소에서 사용해야 하는 구성 요소getCurrentInstance:

import { getCurrentInstance } from 'vue'

setup(){
  const internalInstance = getCurrentInstance()
  ...
  myReactiveVariable.date = internalInstance.appContext.config.globalProperties.$moment(res.data.date).format('l');

}

할 수 없었다.app.use(moment)순간은 Vue 플러그인이 아니기 때문에.

참조URL: https://stackoverflow.com/questions/65654465/using-momentjs-globally-in-vuejs-3