공통로직 구현 시 vue mixin 사용하기

• vue 에서 공통로직을 사용할 때 나는 vue의 prototype에 funtion으로 정의하고는 했다. 하지만 이렇게 간단한 공통함수는 mixin으로 정의하는것이 편하겠다.
  (예를들면 아래처럼...)

install( Vue ) {

    Vue.prototype.$isEmptyObject = function( obj ) {

        if( !obj || obj == null || JSON.stringify( obj ) == "{}" ) {
            return true;
        }
        return false;
    }

},

 

• mixin 에서 store 을 사용하는 방법
  mixin 에서 this 는 vue component 를 가리킨다.
  mixin 에서 store을 사용하려면 그냥 컴포넌트 내에서 사용하는 것과 마찬가지로 this.$store 이런식으로 사용하면 된다.

 

• 전역으로 mixin 사용하기
  * 사용경우 : 로그 저장 등의 공통로직
  * 등록방법

import commonMixin from '@/services/mixins/commonMixin';
Vue.mixin( commonMixin );

 

• mixin, component 내에서 정의하는 methods, 우선순위는?
  mixin 에서 사용하는 methods 와 component 에서 정의하는 내부 methods 에서 같은 이름의 함수가 있다면 오류가 날까 궁금해서 해보았다.
  결과적으로 이름이 중복될 때 오류는 발생하지 않고, component 내에서 정의하는 methods 가 우선순위이다.