javascript - 在 VueJS 3 中全局使用 momentJS

Question

在 VueJS 2 中，我可以像这样全局使用 momentJS:

在 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”，我必须在每个组件中导入“moment”。 没有更好的解决办法吗？我阅读了很多文档和教程，但没有看到任何好的... 提前致谢。

编辑:这是我在组件中使用 $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>

Answer 1

将时刻添加到全局配置属性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');

然后在带有选项 api 的任何子组件中使用 this.$moment，您应该使用 getCurrentInstance 组合:

import { getCurrentInstance } from 'vue'

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

}

你不能做 app.use(moment) 因为 moment 不是 Vue 插件。