はじめに
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_format' ＜ーこれを追記
],
・・・
}
使い方
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