グローバルな定数管理を✅
データをフロントで持たせたい。そんなことって日常茶飯事ですよね。僕は脳筋すぎて、データ？とりあえずVuexに突っ込むっしょ👆ﾋェﾋェ👆とか考えてました。
技術面談でその考えは儚くも砕けさりました。
どうやら静的な値はconstに切り出して保管しておく方法があるようです。
今回はグローバル定数の切り出し方に関して学習していきます**。**
グローバル定数って？
どの画面でも呼び出すことのできる定数。複数のコンポーネントで使いたい時に役に立つ。
どうやって切り出すの？
自分で作成したconstフォルダに切り出す。
このフォルダ内に、hoge.jsを作成し、不変の値、例えば、お酒の度数や量をconstしておく。
そして複数の値をconstしたファイルを、下記のようにimport/requireしてくるだけ。
#frontend/const/alcohol.js
const PURE_ALCOHOL_INTAKE =
{beer: 14, wine: 12, sake: 22, shotyu: 20, wiskey: 10, sour: 12, umeshu: 12, tyuhai: 14};
export default {
PURE_ALCOHOL_INTAKE,
}
#AlcoholAnalyze.vue
<template>
<div>
<div v-for="alcohol_amount in alcohol_amounts" class="display-flex">
<p>{{alcohol_amount}}</p>
</div>
</div>
</template>
<script>
import PURE_ALCOHOL_INTAKE from '@/const/alcohol.js'
export default {
data() {
return {
alcohol_amount:[]
}
},
methods: {
alcoholAmount(i) {
return PURE_ALCOHOL_INTAKE[i] = this.alcohol_amount
}
}
}
</script>
これで孫コンポーネントやその先までpropsで渡さずとも、そのファイル内でimportして使用することができる。
