Vue.js에서 정적 데이터를 저장하고 소비하는 방법

Vue.js에서 정적 데이터를 저장하고 소비하는 방법

리소스 인덱스 페이지에서 사용하기 위한 매우 추상적인 테이블 구성 요소를 작성했다고 가정합니다(예:/users,/posts...).

컴포넌트에는 다음 두 가지 기본 속성만 있습니다.resourceName및 일련의resources표시할 수 있습니다.테이블을 올바르게 렌더링하기 위해 특정 리소스 유형에 연결된 일종의 구성 데이터 구조를 만들었습니다.resourceName각 리소스 유형은 테이블이 가진 다양한 열을 나타내는 객체 배열에 연결되어 있으며, 이러한 객체가 표시하는 속성 및 값을 표시하는 데 사용할 수 있는 컴포넌트 및 컴포넌트에 값을 제공하기 위해 사용할 수 있는 소품입니다.

{
   users: [{
       property: 'id',
       label: 'ID'
   }, 
   {
       property: 'created_at',
       label: 'Time of registration',
       component: 'datetime-showcase',
       passPropertyAs: 'value'
   }],
   //...
}

다음의 3가지 어프로치가 표시됩니다.

1. js 파일에 데이터가 저장되는 응용 프로그램루트의 디렉토리테이블 컴포넌트는 다음 방법을 통해 데이터에 액세스합니다.import tableConfigs from '@/config/tables'데이터를 다음과 같이 제공하는 계산된 속성이 있습니다.

columns() {
 return tableConfigs[this.resourceName];
}

2. 데이터는 중앙의 단일 vuex 모듈에 저장됩니다.리소스 이름을 받아들이는 getter가 있는 계산된 속성은 테이블 구성을 검색하는 데 사용됩니다.
3. 데이터는 리소스 유형별로 하나씩 여러 vuex 모듈에 저장되며 계산된 속성은 해당 모듈 상태에서 데이터를 가져오는 데 사용됩니다.

이러한 유형의 데이터를 테이블 구성요소에서 사용하기 위해 어떤 방식으로 저장해야 합니까(유지관리성과 성능 측면에서)?다른 컴포넌트에서도 비슷한 상황이 발생하고 있습니다.예를 들어 자원 인덱스 정렬을 처리하는 컴포넌트에서는 다양한 인덱스를 정렬할 수 있는 항목과 사용할 라벨이 다릅니다.

언급URL : https://stackoverflow.com/questions/58061944/how-to-store-and-consume-static-data-in-vue-js