【Nuxt.js】Util関数を定義する

1 min read読了の目安(約800字

定義の仕方

/plugins/utils.js

staticメソッドを定義したクラスを定義し、injectを使用してプロジェクト内で共通化します。

class Utils {
  static sampleMethod () {
    ・・・
  }
}

export default (context, inject) => {
  inject('utils', Utils)
}

nuxt.config.js

export default {
  plugins: [
    { src: '~/plugins/utils.js' }
  ]
}

使い方

後はプロジェクト内の各ページで、以下のようにVueインスタンス(this.)から呼び出せます。

this.$utils.sampleMethod()

middleware,asyncData,fetchではVueインスタンス生成前なので、引数のcontextから呼び出せます。contextの分割代入{}で、utilsを取得しましょう。($付きの名前になっています。)

// middleware
export default function ({ $utils }) {
  $utils.sampleMethod()
}
export default {
  // asyncData
  asyncData ({ $utils }) {
    $utils.sampleMethod()
  },
  // fetch
  fetch ({ $utils }) {
    $utils.sampleMethod()
  }
}