vue에서 mixin을 통해 중복된 코드를 없애보자

믹스인(Mixin)이란 무엇인가?

Mixins는 Vue 컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법입니다.
mixin 객체는 모든 구성 요소 옵션을 포함할 수 있습니다.
컴포넌트에 mixin을 사용하면 해당 mixin의 모든 옵션이 컴포넌트의 고유 옵션에 “혼합”됩니다.

Vue Docs에 보면 믹스인에 대한 설명이 위와 같이 나타나 있다.
저 설명을 쉽게 풀면 공통 사용되는 코드를 묶어서 파일로 만들고, 해당 코드를 필요로 하는 컴포넌트에 해당 파일을 mixins 속성에 값으로 전달하면
코드가 적용된다는 의미이다.

믹스인 적용시켜보기

// src/mixins/TestMixin.js

export default {
  data() {
    return {
      message: "안녕하세요.",
      foo: "bar",
    };
  },
  computed: {
    messages() {
      return this.message + "라는 메시지가 추가되었습니다.";
    },
  },
  methods: {
      handleClick(){
          console.log("버튼이 클릭되었습니다.")
      }
  }
  beforeCreate() {
    console.log("beforeCreate");
  },
  created() {
    console.log("created");
  },
  beforeMount() {
    console.log("beforeMount");
  },
  mounted() {
    console.log("mounted");
  },
  beforeUpdate() {
    console.log("beforeUpdate");
  },
  updated() {
    console.log("updated");
  },
};

src 폴더 아래 mixins라는 폴더를 만들고, 그 밑에 믹스인 파일들을 만들어보자.
해당 예시는 TestMixin.js라는 파일을 만들어보았다.

”/”으로 접속할 때 보여줄 Index.vue가 있다고 생각해보자.

<template>
  <div>
    <h1>
      인덱스 페이지
    </h1>
    
    
    <button v-on:click="handleClick">버튼버튼</button>
  </div>
</template>

<script>
import TestMixin from "../mixins/Test";

export default {
  created() {
    console.log("인덱스 페이지입니다");
  },
  mixins: [TestMixin]
};
</script>

<style></style>

믹스인 속성에 TestMixin을 전달하기만 하면 코드가 적용된다. 배열 형태기 때문에 사용할 믹스인들을 다 전달하면 되고 순서대로 적용이 된다고 생각하면 된다.

주의사항

병합되기 때문에 중복된 데이터명이나 메소드명을 사용하게 될 수도 있다. 이 때에는 컴포넌트에 선언된 것을 우선으로 한다. 컴포넌트에 선언된 것이 아니라면
배열 상 뒤에 있는 것이 적용된다.

그리고 믹스인에 created와 컴포넌트에 created가 둘다 있다면 믹스인부터 적용이 된 후에 컴포넌트의 created가 적용이 된다.