定数を複数のコンポーネントで使いたい
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;