はじめに

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

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