【Nuxt.js】injectについて

はじめに

こんにちは。
こちらの記事では、Nuxt.jsのinjectについて記しています。
誤っている点がございましたらコメントいただけると幸いです。

injectとは

pluginsディレクトリで使用できるメソッドで、関数や値を共通化することができ、importしなくてもコンポーネントやVuexストアに挿入することができます。this.$~を使って呼び出すことができる。

参考記事：https://nuxtjs.org/ja/docs/directory-structure/plugins

実装手順

実際のコードの例で見ていきたいと思います。
今回はfirebaseを導入し、injectでVuexストアに呼び出す処理を記述します。

1. injectの定義

pluginsディレクトリでinjectの定義を行います。

plugins/firebase.js

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/functions';

const config = {
    //APIキー
}

firebase.initializeApp(config)

export default function (context, inject) {
    inject('auth', firebase.auth())
    inject('functions', firebase.functions())
}

injectメソッドは下記の構成となっており、呼び出す際はthis.$keyとなる。

inject('key',value)

2. nuxt.config.jsの設定

puluginsが使用できるように、nuxt.config.jsのpluginsに以下のように記述します。

nuxt.config.js

plugins: [
  '~/plugins/firebase.js'
]

3. Vuexストアで呼び出す

Vuexストアのactionsで呼び出します。
下記のthis.$authの部分が、先ほど定義したinjectのinject('auth', firebase.auth())のkeyを指定しています。

functionsを呼び出す場合は、this.$functionsとなります。

store/index.js

export const state = () => ({
});

export const actions = {
  login({ dispatch }, payload) {
    this.$auth //以下省略
};

おわりに

ここまでNuxt.jsのinjectについてまとめました。
紹介したのは一部の実装に過ぎないので、今後injectに触れる機会があれば改めて記事にしていきたいと思います。
以上、最後まで読んでいただきありがとうございました！
よければLGTMを押してくれると嬉しいです！