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