如何在 vue 3 应用程序和组件中正确使用 dayjs

Question

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

    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')

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

Answer 1

接受的方法似乎没有考虑组合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()}}.

Answer 2

你可以使用

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