Posted at

Nuxt.jsでVueコンポーネントでもVuexでもdate-fnsを使う


はじめに

Nuxt.jsのvuexでMoment.jsを利用するを作成したあとに、Vue.jsのslackコミュに投げました。

そしたら、時代は、moment.jsではなくて、date-fnsということを教えていただきました。

そしたら同様にNuxt.jsで使いたいのでプラグインを作っていきます。


date-fnsの使い方


書式整形

日付の書式変更は、formatを使うらしい。

https://date-fns.org/v1.29.0/docs/format

以下のような感じで使います。

import format from 'date-fns/format'

import jaLocale from 'date-fns/locale/ja'
const result = format(
new Date(2014, 6, 2),
'YYYY/MM/DD HH:mm:ss',
{locale: jaLocale}
)
//=> '2014/02/11 00:00:00'


Date型変換

日付の文字列などをDate型に変換する場合は、parseを使うらしい。

https://date-fns.org/v1.29.0/docs/parse

import parse from 'date-fns/parse'

// Convert string '2014-02-11T11:30:30' to date:
const result = parse('2014-02-11T11:30:30')
//=> Tue Feb 11 2014 11:30:30


Nuxt.jsに組み込む

Moment.jsのプラグインを作成したように、date-fnsのformatのプラグインを作成する


plugins/date_format.js

import format from 'date-fns/format'

import ja from 'date-fns/locale/ja'
import parse from 'date-fns/parse'

export default ({ app }, inject) => {
inject('date_format', (date = new Date(), formatStr) => {
return format(parse(date), formatStr, { locale: ja })
})
}


組み込みます。


nuxt.config.js

module.exports = {

・・・
plugins: [
'@/plugins/vuetify',
'@/plugins/axios',
'@/plugins/date_fns' <ーこれを追記
],
・・・
}


使い方


Vuex


store/posts.js

export const actions = {

async publishPost({ commit }, { payload }) {
const created_at = this.$date_format(new Date())
}
}


Vueコンポーネント

  computed: {

showPosts() {
return this.posts.map(post => {
const tmp = { ...post }
tmp.created_at = this.$date_format(
post.created_at,
'YYYY/MM/DD HH:mm:ss'
)
return tmp
})
}
}

ちなみに、サイズも41KiBほど小さくなりました。

Moment.js: 6421c4c6c45adabb8508.js    **419 KiB**       9  [emitted]  [big]  vendors.app

date_fns: 63ab1334cce23066f889.js **378 KiB** 9 [emitted] [big] vendors.app


参考文献