Mixins

 

포스팅의 내용은
https://www.inflearn.com/course/vue-%EC%A0%9C%EB%8C%80%EB%A1%9C%EB%B0%B0%EC%9B%8C%EB%B3%B4%EA%B8%B0
위 강의 내용을 정리한 것입니다.

 

 

Mixins

믹스인을 사용하면 공통함수들을 모아서 관리할 수 있다.

axios로 request를 날리는 함수를 공통함수로 정의하고 사용해보자.

 

아래에 axios로 request를 날리는 api메소드가 있다.

40라인

이걸 api.js라는 파일에 따로 정의한다.

$사인을 사용했는데 이는 필수는 아니고, 공통으로 분리하여 mixin으로 만든 함수들과 vue파일의 moethods 안에 정의된 함수들을 구분하기 위함이다.

 

그리고 이제 위에서 정의한 것을 사용해보자.

import하고, mixins 배열에 넣어주고, 사용하면 된다.

 

 

그리고 mixin에도 mounted를 추가할 수 있다.

api.js에 mounted를 추가해보자.

 

그리고 vue컴포넌트에서 정의한 mounted와 mixin의 mounted중 어떤 것이 먼저 실해되는지 알아보기 위해 api.js의 mixin을 사용하는 vue 컴포넌트에도 mounted를 정의해본다.

 

브라우저를 실행해보면 콘솔창에 mixin의 mounted가 먼저 실행되는 것을 볼 수 있다.

 

 

만약 우리가 만든 mixin을 모든 컴포넌트에서 사용해야한다면 다음과 같이 하면 된다.

main.js를 수정해준다.

우리가 만든 api.js를 임포트하고, app.mixin(api)

 

그러면 굳이 따로 임포트하지 않고도 사용할 수 있다.

 

물론 mixin을 글로벌로 사용하는 것은 모든 컴포넌트에 많은 메소드가 들어가게 되는 것이다. 하여 주의하여 사용해야한다.