Help us understand the problem. What is going on with this article?

Nuxt.jsで異なるコンポーネントから共通で利用できる関数を定義する(inject編)

異なるコンポーネントから共通で利用できる関数を定義したかったので、試してみました。

以前の記事ではmixinを使って実現しましたが、この方法では asyncDatafetch 内で共通の関数を利用できませんでした。
そのため、今回はinjectを使って実現しています。

この方法では、 asyncDatafetch 等のSSR時も関数を利用できるため、こちらの方が良いかもしれません。

共通の関数を定義する

plugins/ 内に utils.js というファイルを作成し、ここに関数を定義していきます。
今回は例として hoge()fuga() という、2つの関数を定義するものとします。

使用する際は this.$huga() のように記述します。

plugins/utils.js
const hoge = () => {
  return "hoge";
}

const fuga = () => {
  return "fuga";
}

export default ({}, inject) => {
  inject('hoge', hoge);
  inject('fuga', fuga);
}

nuxt.config.jsに設定を追加

nuxt.config.js に設定を追加します。

nuxt.config.js
plugins: [
  '@/plugins/utils'
],

コンポーネントからの利用

<template> 内での利用は、関数名の前に $ を付けて呼び出します。

pages/index.vue
<template lang="pug">
el-button(@click="$hoge()") hogeを実行
</template>

<script> 内の asyncDatafetch 内で使用したい場合は、 context から呼び出します。
こちらも関数名の前に $ が付きます。

pages/index.vue
<script>
export default {
  asyncData(context){
    context.app.$hoge();  // ここで呼び出し
  }
}
</script>

SSR時以外は、 this.$hoge() のように呼び出します。

pages/index.vue
<script>
export default {
  methods: {
    hoge() {
      return this.$hoge();  // ここで呼び出し
    }
  }
}
</script>

便利!

itouuuuuuuuu
痛風持ち だいたい酔ってます
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away