如何在 vue 3 应用和组件中正确使用 dayjs答案

【问题标题】：how to properly use dayjs inside vue 3 app and component如何在 vue 3 应用和组件中正确使用 dayjs
【发布时间】：2021-06-08 01:49:56
【问题描述】：

我可以通过将 dayjs 添加到 data() 来在 vue3 组件中使用它


    import dayjs from 'dayjs'
    
    export default {
      data() {
        return {
          dayjs
        }
      }
    }

然后我可以在模板中使用它，但这是正确的做法吗？

如果我想配置 dayjs 并在全局范围内使用它怎么办？我试过了

    import dayjs from 'dayjs'
    import { createApp } from 'vue'
    const app  = createApp(App)
    
    app.use(dayjs) // doesn't work
    app.dayjs = dayjs // doesn't work
    
    app.mount("#app')

但到目前为止无法让它工作。
正确的做法是什么？

【问题讨论】：

我想如果我们在 main.js 文件中加载 dayjs 类似于 Vue.use(require("dayjs"));然后在组件中像这样导入它 import * as daysjs from "daysjs/daysjs";.

标签： vue.js vuejs3 dayjs

【解决方案1】：

你可以使用

import dayjs from 'dayjs'
import { createApp } from 'vue'
const app  = createApp(App)
    
app.config.globalProperties.$dayjs = dayjs
    
app.mount("#app')

【讨论】：

谢谢，对象是这样正常传递的吗？以及如何在组件内部使用它？
mmm，最佳实践使用app.use()，但需要适配dayjs lib。 app.config.globalProperties 正常做法。在组件 js 中你可以使用 this.$dayjs，在模板中使用 $dayjs
非常感谢！会试试的
这只是给了我错误Cannot read property 'globalProperties' of undefined 任何想法？

【解决方案2】：

接受的方法似乎没有考虑组合 API。我的理解是，将其与 Composition API 一起使用的唯一方法是提供/注入。下面的示例使用组合 API、脚本和模板中的选项 API。

//[main.js]

import dayjs from 'dayjs' //import dayjs in your main.js
 
app.provide('dayJS', dayjs) // provide dayJS

app.use(router).mount("#app") // mount app

// [component.js]

// Composition API setup ------------------
import { inject } from 'vue' // import inject from vue
const dayJS = inject("dayJS") // inject dayJS

//make sure that you return dayJS in setup along with any functions/variables
return { dayJS }

// Options API setup ------------------
app.component('mycomponent', {
  inject: ['dayJS'],
  created() {
    console.log(dayJS())  
  }
})

//You can now use dayJS directly within setup ex: dayJS() or template ex: {{dayJS()}}.

【讨论】：

【解决方案3】：

您可以使用provide/inject 在组件内部使用dayjs。

//main.js
import dayjs from 'dayjs'
import { createApp } from 'vue'

const app = createApp({
  provide() {
    return {
      $dayjs: dayjs // <-- provide 
    }
  },    
    
app.mount("#app')


//myComponent.vue
<template>
    DajsJS: {{ myDays }}
</template>

<script>
export default {
  name: 'myComponent',
  inject: ['$dayjs'], // <-- inject
  computed: {
    myDays() {
      return this.$dayjs('1990-01-01')
    }
  }
}
</script>

【讨论】：

【解决方案4】：

如果您使用的是组合 API，您可以直接使用 dayjs，而无需通过提供程序传递它。看下面的例子。

<template>
  <section>
    <h1>Título de ejemplo</h1>
    <h2>
      Fecha de creación 
      {{ dayjs('Fri Dec 17 2021 00:55:42 GMT-0500 (hora estándar de Colombia)').format('DD/MM/YYYY HH:mm') }}
    </h2>
    <h3>
      Otra prueba {{ date }}
    </h3>
  </section>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from "vue";

import dayjs from "dayjs";

export default defineComponent({
  name: 'Ejemplo',
  setup() {

    const date_example = ref<string>('Fri Dec 17 2021 00:55:42 GMT-0500 (hora estándar de Colombia)');

    const date = computed<string>((): string => {
      return dayjs(date_example.value).format('DD/MM/YYYY HH:mm');
    });

    return {
      dayjs,
      date,
    }
  }
});
</script>

【讨论】：