1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2023-10-20

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

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;
1
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?