[Vue.js] Mixin으로 똑같은 함수, 변수들을 모아보자
in FrontEnd
vue 스캐폴드로 구성을 하고 나면,
특히 내가 일할때는 진짜 상태관리….상태관리 오지게 해줘야하는데
computed에서 갖고온뒤 사용하는 변수들도 너무 많고, data도 너무 많고
그래서 computed()
가 너무너무 길어져서 사실 가독성이 너무 떨어졌다.
그리고 메소드들도, 겹치는 경우가 많은데 그러면 쓸데없이 코드만 겁나 길어지고
가독성은 떨어지고 할때마다 수정할때 일괄수정이 아니라 일일히 수정해주어야 하는…
여러가지 개발자들이 흔히 부딫히는 문제에 직면할 수 있게된다
이때 사용할 수 있는게 mixin이라는 건데,
메소드, 변수(data, computed) 등등 을 따로 빼서 일괄적으로 관리해줄 수 있다.
(진짜 엄청 편했다)
물론 모든 다른 언어들도 다 include기능이 있지만,
(왜냐면 include기능이 없다는건 코드가 너무나도 비효율적이 되기 때문에….
프로그래밍을 하는 의미가 없다고 생각한다. 단순노동 줄이려고 코딩하는건데..)
여튼간, vue에서는 mixin으로 한꺼번에 모두 모아서 import
해주면 된다.
import includeJS from './includeJS.js';
export default {
mixins: [includeJS],
components:{
cmp
}
import { faCog } from '@fortawesome/free-solid-svg-icons'
import { faTrashAlt } from '@fortawesome/free-regular-svg-icons'
var tuchalVar = {
data() {
return {
testVar:'',faCog,faTrashAlt
}
},
computed:{
get(){
return this.$store.state.testVar2
},
set(val){
this.$store.state.testVar2 = val;
}
}
}
이런식으로 모아서 관리해주면 된다.