Zenn
📚

【Nuxt.js】 inject is 何？

2020/09/17に公開
JavaScript
Nuxt
Vue.js
inject
tech

TL;DR.

  • injectを利用すると関数を共通化することができる
  • 関数はthis.$hogeで呼び出すことができる

injectを使用した処理の例

ページに'hoge'を返す関数を作ってみる

plugins/hoge.js
const returnHoge = () => {
  return 'hoge'
}

export default(context, inject) {
  inject('hoge', returnHoge)
}

これをnuxt.config.jsに設定する

nuxt.config.js

plugins: [
  { src: '@/plugins/hoge', ssr: false }
]

このようにするとthis.$hogeでVueインスタンスで関数を実行することができる

引数を渡したい場合や、関数名を代替したい場合はこのようにする

const calcNumber = (num) => {
  return 3 * num
}

export default(context, inject) {
  inject('calc', { get: calcNumber })
}

これでthis.$calc.get(4)を実行すると12が返ってくる

コンポーネントから呼び出す場合

asyncDataやfetchで使用したい場合はこのように呼び出す

pages/index.vue
export default {
  asyncData(context) {
    context.app.$hoge()
  }
}

injectを使用する利点

  • 確定した処理の共通化が可能
    • 関数を呼び出して必ず実行される処理や分岐に対しては有効
    • ex. 取得処理が成功したら値を返し、失敗したらエラーの処理を実行するなど
  • いちいちページでimportしなくていい
    • これに関しては何を呼び出しているかが明示的にわかりにくくなるので、良し悪しがある
    • 共通化したい処理の中でも関数の実態を把握できるような関数名や共通認識があるものであれば良いが、そうでなければページに残したいところ。。
    • axiosやfirebaseのget, delete、日付処理など、誰が見てもわかり切っているものなら便利そう
  • Vuexストア内でも同様にthis.$で関数を呼ぶことができる
  • 同様の方法にmixinを使用して関数をグローバルに実行する方法があるが、injectの場合はasyncDataやfetch内でも共通の関数を利用することができる

参照

Nuxt.js 統合された注入

Discussion