Vue) Mixins 믹스인

믹스인이란??

• 믹스인(Mixins)은 여러 컴포넌트 간에 공통으로 사용하고 있는 로직, 기능들을 재사용하는 방법이다.
• 믹스인에 정의할 수 있는 재사용 로직은 data, methods, created 등과 같은 컴포넌트 옵션들이다.

믹스인 코드 형식

var startMixins = {
  // 컴포넌트 옵션 (data, methods, created 등 )
};

new Vue({
  mixins: [startMixins]
})

• 믹스인을 주입할 컴포넌트에 mixins 속성을 선언한 뒤, 배열 안에 주입할 믹스인들을 추가한다.

믹스인 사용 예시

• 모달 or 팝업 차의 열기, 닫기 로직 믹스인 정의하기

var DialogMixin = {
  data() {
    return {
      dialog: false  // 모달의 상태를 나타냄
    }
  },
  methods: {
    showDialog() {
      this.dialog = true;   // 모달 열기 
    },
    closeDialog() {
      this.dialog = false;  // 모달 닫기
    }
  }
};

<!-- LoginForm.vue -->
<script>
import { DialogMixin } from './mixins.js';

export default {
  mixins: [ DialogMixin ]
  methods: {
    submitForm() {
      axios.post('login', {
        id: this.id,
        pw: this.pw
      })
      .then(() => this.closeDialog())
      .catch((error) => new Error(error));
    }
  }
}
</script>

• submitForm() 메서드에서 HTTP POST 요청을 보내고 나면, this.closeDialog() 로 메서드를 호출하는데 이 메서드는 믹스인에 의해 주입된 메서드이다.
  따라서 LoginForm 컴포넌트에 없더라도 사용이 가능하다.

참고사이트