Nuxtjsで共通の処理をpluginsを利用して管理する

参考ページ

アプリ全体で関数や値を利用できるようにしたい場合があります。 これらの変数をVueインスタンス（クライアント側）、コンテキスト（サーバー側）、さらにはVuexストアに挿入できます。 これらの関数の前に$を付けるのが慣例です。 Nuxt.jsは、これを簡単に行うためのinject（key、value）メソッドを提供します。 関数をエクスポートするとき、注入は2番目のパラメーターとして指定されます。 $は、キーの先頭に自動的に追加されます。

ja.nuxtjs.org

設定

• plugins/utils.jsファイルを作成してプロジェクト全体で利用する関数を記述する

const formatDate = (createdAt) => {
  const dt = new Date(createdAt)
  dt.setTime(dt.getTime() - 1000 * 60 * 60 * 9)
  return (
    dt.getFullYear() +
    '-' +
    ('00' + (dt.getMonth() + 1)).slice(-2) +
    '-' +
    ('00' + dt.getDate()).slice(-2)
  )
}

const formatDateTime = (createdAt) => {
  const dt = new Date(createdAt)
  dt.setTime(dt.getTime() - 1000 * 60 * 60 * 9)
  return (
    dt.getFullYear() +
    '-' +
    ('00' + (dt.getMonth() + 1)).slice(-2) +
    '-' +
    ('00' + dt.getDate()).slice(-2) +
    ' ' +
    ('00' + dt.getHours()).slice(-2) +
    ':' +
    ('00' + dt.getMinutes()).slice(-2) +
    ':' +
    ('00' + dt.getSeconds()).slice(-2)
  )
}

export default ({ app }, inject) => {
  inject('formatDate', formatDate)
  inject('formatDateTime', formatDateTime)
}

設定

• nuxt.confg.jsファイルに作成したファイルをpluginsに設定する

  plugins: [
    '@plugins/utils'
  ],

ページやstore内

• store内で共通処理を実行する場合

export default {
  actions: {
    async hogehoge({ commit }, params) {
      this.$formatDate(params)
    }
  }
}

• pages内で共通処理を実行する場合

<template>
   <div> 
     {{ $formatDate("2021-02-27") }}
   </div>
</template>

おまけ

• page内でdispatchを連続で呼び出す方法

  methods: {
    async getData() {
      await this.$store.dispatch('hoge1/test1', this.search)
      await this.$store.dispatch('hoge2/test2',this.$store.state)
      await this.$store.dispatch('hoge3/test3',this.$store.state)
    }
  }