Vue.jsで定数を切り出して使うやり方

定数を複数のコンポーネントで使いたい

Vue.jsでTodoアプリを作っていた時に、「未実施」などのステータスを定数で管理したいなと思った。

自分が作っていたコンポーネントの構成では、ステータス定数を複数のコンポーネントで使用するため、外に切り出すことにした。

そのやり方のメモ

定数ファイル

まず、/srcディレクトリの下に/constディレクトリを作成した。
その下にstatuses.jsというJSファイルを作成し、その中で定数を定義

/src/const/statuses.js

export const statuses = {
    NOT_START: { "id": 0, "value": "未実施" },
    DOING: { "id": 1, "value": "処理中" },
    COMPLETED: { "id":2, "value": "完了" }
}

コンポーネントで読み込む

さっき定義した定数ファイルをコンポーネントでimportする。

/src/components/Todo.vue

import { statuses } from ../const/statuses

この時、{}を付けないとエラーになったので注意

これで、コンポーネントの中で定数を使うことができる！

/src/components/Todo.vue

const firstStatus = statuses.NOT_START;