Vue.js 중복되는 로직 재활용 하기 ( mixin )

안녕하세요.

이번 올릴 주제는 mixin 을 이용하여 공통으로 사용하는 로직을 여러 component에서 공유하는 방법입니다.

 

중복을 제거하여 component의 size도 줄이고 코드가 분산되지 않아 유지보수성도 높일 수 있습니다. :)

 

mixin에 대한 설명은 vuejs.org에 아래와 같이 설명되어 있습니다.

---

• 전달인자:

  • {Object} mixin

• 사용방법:

  전역으로 mixin을 적용합니다. 생성된 모든 Vue 인스턴스에 영향을 줍니다. 플러그인 작성자가 컴포넌트에 사용자 정의 동작을 주입하는데 플러그인을 사용할 수 있습니다. 애플리케이션 코드에서는 추천하지 않습니다.

https://kr.vuejs.org/v2/api/#Vue-mixin

API — Vue.js

---

솔직히 처음에 보고 무슨 말인지 잘 이해하질 못했었습니다.

 

그런데 vue 에 대해 여러 포스팅을 참고하다가 아래 글을 보고 눈이 띄여서 mixin을 적용해 보게 되었습니다.

https://woowabros.github.io/experience/2018/06/07/vue-story-of-baminchan.html

배민찬은 Vue를 어떻게 사용하나요? - 우아한형제들 기술 블로그

제가 mixin을 적용한 방법은 두가지 입니다.

1. 전역 mixin

제가 사용하는 method 중에 모든 component에서 동일하게 사용하는 method가 하나 있습니다. 

원래는 각 component 마다 method 부분에 해당 로직을 작성했는데 아래와 같이 처리하여 중복을 제거했습니다.

- main.js

import Vue from 'vue'
import { router } from './router'
import { sync } from 'vuex-router-sync'
import store from './store/store'
sync(store, router)

Vue.mixin({
  methods: {
    showMessage(msg, type) {
      if (msg) this.$message({type: type || 'success', showClose: true, message: msg}) 
    }
  }
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

위의 Vue.mixin 부분을 보시면 되며 이렇게 함으로써 showMessage라는 method는 component별 정의를 하지 않아도 사용할 수 있게 되었습니다.

 

2. 로직 재활용

script 의 구조는 거의 유사하지만 화면의 구조는 다른 두개의 component 가 있다고 가정해 보겠습니다.

- Sample.vue

<template>
  <v-datatable v-model="items" @changed="change"/>
</template>
<script>
  export default {
    data () {
      return {
        items: []
      }
    },
    methods: {
      change () {
        console.log('items changed')
      }
    }
  }
</script>

- Sample2.vue

<template>
  <v-input v-model="items" @changed="change" @input="input"/>
</template>
<script>
  export default {
    data () {
      return {
        items: []
      }
    },
    methods: {
      change () {
        console.log('items changed')
      },
      input () {
        console.log('value input')
      }
    }
  }
</script>

제가 mixin을 모를때 까지는 위와 같은 경우 v-if 를 사용해서 작성하였습니다만 코드가 길어져서 이후 유지보수가 힘들어 지는 문제점이 있었습니다. ( 사실 위에 처럼 코드가 단순하다면 그냥 v-if를 사용하는게 더 좋습니다.) 

 

이제 mixin을 사용해서 코드를 분리해 봅니다. 

- sample.js

export default {
  data () {
    return {
      items: []
    }
  },
  methods: {
    change () {
      console.log('items changed')
    }
  }
}

- Sample.vue

<template>
  <v-datatable v-model="items" @changed="change"/>
</template>
<script>
  const js = require('./sample.js')
  export default {
    mixins: [js.default]
  }
</script>

- Sample2.vue

<template>
  <v-input v-model="items" @changed="change" @input="input"/>
</template>
<script>
  const js = require('./sample.js')
  export default {
    mixins: [js.default],
    methods: {
      input () {
        console.log('value input')
      }
    }
  }
</script>

이렇게 js 를 분리하고 각 component 에서 mixin으로 사용할 수 있어 공통된 부분은 건드리지 않고 재활용 할 수 있게 되었습니다.

 

감사합니다.