【Nuxt.js / Vue.js】グローバル定数を定義して、v-for内の算出プロパティで使用する

はじめに

ステータス管理をしたいな～となったときに、DBでは大抵数字とかで管理するのではないでしょうか。
1だったら進行中で～2だったら完了で～など各ページのdata内に書いたりしても間違いではないと思いますが、グローバル定数をいい感じで管理したいなと思って実践したのでその備忘録です。
間違いや、もっとこうしたほうがいいよ～とか、こんなやり方もあるよ～など何かありましたらコメントお願いします！

グローバル定数管理をする

jsファイルの作成

まずは定数を定義するファイルを~/pluginの直下に作成します。今回はconstants.jsとし、以下のようにしました。

constants.js

const SAMPLE = 'sampleですよ'
const PROJECT_STATE = {
  1: '開始前',
  2: '進行中',
  3: '終了',
}

export default (context, inject) => {
  inject('SAMPLE', SAMPLE)
  inject('PROJECT_STATE', PROJECT_STATE)
}

文字列を返すSAMPLEと、ステータスの情報を持ったPROJECT_STATEの２つを定義してみました。
定義した２つをinjectすることで呼び出すことができます。

injectとは

Nuxt.jsのプラグインの機能です。
このinjectを使うことで、Nuxt.jsのアプリケーションで、いろいろな場所から共通で利用したい関数や値を呼び出すことができます。

なので題名と反しますが厳密にはグローバル変数を定義している、というわけではないです。ただinjectしてどこからでもアクセスできるようにした状態ということです（ややこしい）
今回のようなパターンでは、グローバル変数定義してimportで読み込むのでもいいのかなと思いますが、それは今度別記事でまとめます（覚えていれば）

nuxt.config.jsで設定

nuxt.config.jsに記述を追加して先ほど定義したものを読み込むようにします。
pluginsに以下のように追加しました。

nuxt.config.js

  plugins: [
    { src: '~/plugins/constants.js', ssr: false}
  ],

実際に使用する

.vue

<script>
~~略~~
  computed: {
    sample() {
      return this.$SAMPLE
    }
  }

this.$定数名で呼ぶことができます。

v-for内の算出プロパティで使用する

たとえばこんなデータがあるとします。

.vue

<script>
export default {
  data() {
    return {
      projectList: [
        { projectName: "sample1",
          projectId: "1",
          about: "sample1のプロジェクトです。",
          state: 1
        },
        {
          projectName: "sample2",
          projectId: "2",
          about: "sample2のプロジェクトです。",
          state: 2
        },
        {
          projectName: "sample3",
          projectId: "3",
          about: "sample3のプロジェクトです。",
          state: 3
        }
      ]
    }
  }
 }

これをv-forで表示し、かつステータスは数字をもとに先ほど記述したPROJECT_STATEを参照します。

.vue

<template>
  <v-app>
    <template v-for="project in projectList">
        <div>
            {{ project.projectName }}
        </div>
        <div>
            {{ projectState(project.state) }}
        </div>
        <div>
            {{ project.about }}
        </div>
    </template>
  </v-app>
</template>

<script>
export default {
  computed: {
    projectState: function() {
      return function(state) {
        return this.$PROJECT_STATE[state]
      }
    }
  }
}
</script>

methodsに書いてもよかったのですが、何度も再描画は避けたいなと思ったのでcomputedに書いてみました。

参考にしたもの

Vue.jsでのグローバル定数管理を工夫してみた話
Nuxt.jsで異なるコンポーネントから共通で利用できる関数を定義する（inject編）
Nuxt.jsのinjectを使ってDIする

さいごに

今回の定数はすべてのページで使用するというわけではないので、普通に別ファイルで定義してimportでもいいのかな、と思いましたが、共通関数とか書くときはこの書き方がいいのかな、と思います。
書き方は他にもいろいろあるので調べてみてください。
まだまだ初心者なのでうまい使い分けが難しいものです。

最後まで読んでいただきありがとうございます！