Vue.js 전역 상수 관리

Vue의 SPA 개발을 진행하면 상수로 관리하고 싶은 것들이 많이 나온다(묘사된 초기값, 어떤 일람 등).
mixin 문제 있어요., View Model에 해당하기 때문에 가능하다면 Vuex에 저장하고 싶지 않기 때문에 다른 방법으로 생각해 보았습니다.

서로 다른 js 파일에서 관리, 모듈 시스템에서 사용

전제 조건

예를 들어, API에서 반환된 내용은 다음과 같습니다.
response

[
{ id: 1, name: 'Qiita', status: { value: 'active' : label: 'アクティブ' } },
{ id: 2, name: 'Qiitb', status: { value: 'active' : label: 'アクティブ' } },
{ id: 3, name: 'Qiitc', status: { value: 'active' : label: 'アクティブ' } },
]

나는 아래의 표를 표시하고 싶다.

다른 js 파일에서 상수 관리

먼저 테이블 열 정의
consts/hoge/table 아래
HogeTableColumnName.js

export default {
 ID: 'id',
 NAME: 'name',
 STATUS: 'status'
}

이어서 묘사용 정보를 정의합니다
HogeTableColumnList.js

import HogeTableColumnName from 'HogeTableColumnName'

export default [
 { property: 'HogeTableColumnName.ID', label: 'ID' },
 { property: 'HogeTableColumnName.NAME', label: '名前' },
 { property: 'HogeTableColumnName.STATUS', label: 'ステータス' },
]

대상, 대상, 대상.kes를 사용하면 순서를 보장하지 않기 때문에 수조를 통해 관리합니다

모듈 시스템용 Vue 어셈블리

<template>
 <table>
  <thead>
   <tr>
    <!-- columnの数だけカラム生成 -->
    <th v-for="column in HogeTableColumnList">
     {{ column.label }}
    </th>
   </tr>
  </thead>
  <tbody>
   <!-- responseの数だけレコード生成 -->
   <tr v-for="res in response">
    <!-- columnの数だけカラム生成 -->
    <td v-for="column in HogeTableColumnList">
     <template v-if="column.propery === HogeTableColumnName.STATUS">
     {{ res[column.property].label }}
     </template>
     <template v-else>
     {{ res[column.property] }}
     </template>
    </td>
   </tr>
  </tbody>
 </table>
</template>
<script>
import HogeTableColumnList from 'path/const/hoge/table/HogeTableColumnList'
import HogeTableColumnName from 'path/const/hoge/table/HogeTableColumnName'

export default {
 computed: {
  // methods内のみであれば不要だが、template内で使用するために必要
　// dataプロパティへの定義も可
  HogeTableColumnList() {
   return HogeTableColumnList
  },
  HogeTableColumnName() {
   return HogeTableColumnName
  }
 }
}
</script>

상수로 어느 정도 관리해야 할지 고민스럽지만,template는 쉬워지고, 구성 요소 관리도 쉬워진다고 생각합니다.
다른 상수 관리 방법은 다음과 같다. ②에 アプローチは、他の開発者と働いたり、大規模なアプリケーションを開発する際に、最も保守性が高いです。로 기재되어 있어 좋다.
① Vue.나는 js가 구성 요소에서 전역 상수를 사용하도록 하고 싶다
② Vue.js 공식: 실례 속성 추가 / 모듈 시스템 사용 시
(또한 테스트 시에도 사용 가능)

응용 프로그램

template 이상 처리를 methods로 이동

<!-- columnの数だけカラム生成 -->
<template>
 <td v-for="column in HogeTableColumnList">
  <template v-if="column.propery === HogeTableColumnName.STATUS">
  {{ res[column.property].label }}
  </template>
  <template v-else>
  {{ res[column.property] }}
  </template>
 </td>
</template>

<!-- columnの数だけカラム生成 -->
<template>
 <td v-for="column in HogeTableColumnList">
  {{ getColumnValue(res, column.property) }}
 </td>
</template>
<script>
export default {
 methods: {
  getColumnValue(res columnName) {
   if (columnName === this.HogeTableColumnName.STATUS) {
    return res[columnName].label
   } else {
    return res[columnName]
   }
  }
 }
}
</script>

class의 분류 속성에 대해 상수 관리를 진행하다

HogeTableColumnList.js

import HogeTableColumnName from 'HogeTableColumnName'

export default [
 { property: 'HogeTableColumnName.ID', label: 'ID', isRight: true },
 { property: 'HogeTableColumnName.NAME', label: '名前', isRight: false },
 { property: 'HogeTableColumnName.STATUS', label: 'ステータス', isRight: false },
]

<!-- columnの数だけカラム生成 -->
<template>
 <td
  v-for="column in HogeTableColumnList"
  :class="{ 'is-right': column.isRight }"><!-- idは数字なので右寄せに -->
  <template v-if="column.propery === HogeTableColumnName.STATUS">
  {{ res[column.property].label }}
  </template>
  <template v-else>
  {{ res[column.property] }}
  </template>
 </td>
</template>

<style scoped>
.is-right {
 text-align: right;
 padding-right: 2px;
}
</style>

계획 업데이트

감상

enum 관리를 하는 동시에 View Model에 해당하는 정보를 상수로 관리할 수 있습니다.
또 다른 좋은 방법이 있다면 댓글로 남겨주세요.