[Vue] Use object destructuring (lint error)

에러메세지 내용

Module Error (from ./node_modules/eslint-loader/index.js):
error: Use object destructuring (prefer-destructuring) at src\views\mr\BrandPerformance.vue:296:13:
  294 |       const compComboId = '#PRODUCT_BY_RANGE#';
  295 |       const yyyymm = this.query.yyyymm.replace(/-/gi, '');
> 296 |       const prodRangeCd = this.query.prodRangeCd;
      |             ^
  297 |       const rs = await this.compCodeList(compComboId, yyyymm, prodRangeCd);
  298 |       const clsRow = rs.data.resultList;

 

위 에러는 this.query.prodRangeCd를 구조 분해를 통해 가져오지 않았기 때문에 발생한다.

객체 구조 분해를 통해 this.query의 속성을 좀 더 간결하게 추출하라는 내용이다.

this.query 객체에서 여러 속성을 가져온다면 구조 분해를 통해 코드의 가독성을 높일 수 있다.

 

 

 

수정 반영

const { yyyymm, prodRangeCd } = this.query;
const compComboId = '#PRODUCT_BY_RANGE#';
const formattedYyyymm = yyyymm.replace(/-/gi, '');
const rs = await this.compCodeList(compComboId, formattedYyyymm, prodRangeCd);
const clsRow = rs.data.resultList;

 

이렇게 수정하면 this.query 객체에서 yyyymm과 prodRangeCd를 한 번에 구조 분해하여 추출할 수 있다.