[Vuejs] mixins 를 활용한 공통 모듈 만들기

mixins 은?

• Vuejs 의 공통 모듈 생성 및 적용 방법
• component 안 (in)에 import하여, 합쳐서 (mix) 사용
• 공통 변수 선언 및 메소드 정의 가능
• vuejs의 life cycle hook 활용 가능

샘플소스

1. mixin file 생성 (/assets/js/card-common.js)

• 공통 변수 및 메소드 선언

export default {
  components: {},
  data() {
    return {
      allSelectBoxTxt: '전체 (개인/가족/체크카드)',
    };
  },
  mounted() {
  	// vuejs life cycle hook 활용 가능
  },
  method: {
    /**
     * 개인카드보유여부 반환
     * @param {number} indvCardCnt 개인카드건수
     * @return {boolean} true : 전체조회, false : 개별카드조회
     */
  	isIndvCardHv(indvCardCnt) {
        if (typeUtil.isNotUndefined(indvCardCnt) && indvCardCnt > 1) {
          return true;
        }
      	return false;
  	},
  },
};

2. mixin 적용 (/pages/*/*.vue)

• mixin import
• this 키워드를 통한 변수 및 메소드 호출

import cardCommon from '@/assets/js/card-common';

export default {
	mixins: [cardCommon], // 사용할 mixin 파일을 배열로 등록
    data() {
      return {
        cardSelectBoxTxt: '', // 카드선택필터 select box 텍스트
      };
    },
  	...
  	method: {
      /**
       * 카드선택필터 select box 초기화
       * @param {object} cardInfObj 카드정보 json object
       */
      initCardSelectBoxFilter(cardInfObj) {
        if (this.isIndvCardHv(cardInfObj?.indvCardCnt)) { // mixins 활용
          // 전체조회 : 개인카드건수 1개보다 많은 경우
          this.cardSelectBoxTxt = this.allSelectBoxTxt; // mixins 활용
        } else {
          // 개별카드조회 : 대표카드명
          this.cardSelectBoxTxt = cardInfObj?.cardList[0]?.cardNm;
        }
      },
  	},
};

결론

• 2개 이상의 script에서 활용할 변수 및 메소드는 mixins을 활용하여 공통 모듈화하면 변경에 유연하게 대응할 수 있다.
  ex) 카드선택필터 select box 텍스트 변경 or 전체조회 조건 추가

참고

• Vue.js 프로젝트 투입 일주일 전