Mixin과 Plugin

Mixin

Vue 공식문서
https://kr.vuejs.org/v2/guide/mixins.html

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

1. 주로 Vue 내부에서 공통적으로 쓰이는 로직을 재활용하기에 편리하다.
2. global mixin도 정의는 가능하나 모든 컴포넌트에 적용되는 것이므로 주의가 필요하다.
3. 만약 mixin과 component의 옵션이 중복된다면 두 개가 중복 적용되지 않고 하나로 병합된다.
4. mixin은 다중 상속이 가능하며 [] 안에 나열하면 된다.

Minxin 예시

Base.vue

<template>
  <div class="base">
    <p>{{ this.text }}</p>
  </div>
</template>

<script>
import { TestMixin } from '@/testMixin.js'

export default {
  name: 'Base',
  mixins: [TestMixin],
  data () {
    return {
      text: 'This is Base.vue'
    }
  }
}
</script>

testMixin.js

export const TestMixin = {
  created () {
    console.log('mixin test created')
    this.mixinTest()
  },
  beforeDestroy (){
    console.log('mixin beforeDestroy')
  },
  methods: {
    mixinTest () {
      console.log('MixinTest methods')
    }
  }
}

위의 코드 처럼 Base.vue가 있고, 이 Vue에서 textMixin 파일을 import 했을 경우 Base.vue는 사실상 아래의 코드와 동일하다.

Base.vue

<template>
  <div class="base">
    <p>{{ this.text }}</p>
  </div>
</template>

<script>

export default {
  name: 'Base',
  data () {
    return {
      text: 'This is Base.vue'
    }
  },
  created () {
    console.log('mixin test created')
    this.mixinTest()
  },
  beforeDestroy () {
    console.log('mixin beforeDestroy')
  },
  methods: {
    mixinTest () {
      console.log('MixinTest methods')
    }
  }
}
</script>

Plugin

vue 전역 asset

1. Vue.use(Vuex)를 호출하면, Vuex에 정의되어있는 install()이라는 메서드가 호출
   → Vue.use(MyPlugin) 호출하면 MyPlugin에 정의되어 있는 install() 메서드가 호출
2. 모든 구성 요소에서 메서드로 사용할 수 있습니다.
3. 구성 요소 옵션 이상을 구현하여 전체 모듈 (예 : 라우터 또는 상태 관리)을 구성 할 수 있습니다.

plugin, mixin 등을 정의할때 private 속성은 $_ 접두어 사용을 권장 (스타일 가이드)

Plugin 예시

Plugin.js

import networkManager from '@/Manager/networkManager'

export default {
  install (Vue) {
    Vue.prototype.$networkManager = networkManager
  }
}

Main.js

import plugin from './plugin'

Vue.use(plugin)

위와 같이 Plugin.js 파일을 하나 만들어준 뒤 install() 을 통해 Vue에 속성을 추가해준다.
Main.js에서 플러그인 파일을 import한 후 Vue.use(plugin)을 통해 플러그인을 사용하면 끝이다.
(plugin에 있는 install()이 호출되는 방식을 이용한 것이다.)
물론 Main.js 안에서 플러그인 선언과 사용을 모두 처리해도 된다. 하지만 플러그인 코드가 복잡해지는 경우가 생길 수도 있어 나는 주로 파일을 분리하는 편이다.

networkManager.js

class NetworkManager {
  constructor () {
    this.name = 'NetworkManager'
  }

  getData () {
    // 데이터 요청
  }

  setDate () {
    // 데이터 파싱 등
  }

  test () {
    console.log(`This is ${this.name}`)
  }

  static getInstance () {
    if (!this.instance) {
      this.instance = new NetworkManager()
    }
    return this.instance
  }
}

export default NetworkManager.getInstance()

Base.vue

<template>
  <div class="base">
    <p>{{ this.text }}</p>
  </div>
</template>

<script>
import { TestMixin } from '@/testMixin.js'

export default {
  name: 'Base',
  mixins: [TestMixin],
  data () {
    return {
      text: 'This is Base.vue'
    }
  },
  created () {
    this.$networkManager.test() // This is NetworkManager
  }
}
</script>

플러그인으로 선언된 파일은 Vue 파일 내부에서 this로 접근이 가능하다.

개인적으로 mixin을 쓰는 경우는 vue 내부에서 처리되어야 하는 동일한 method를 여러 곳에서 사용하는 경우 또는 vue의 내부에서 처리해야되는 이벤트 리스너들은 추가하거나 제거하는 경우 사용했다. plugin으로는 vue 내부의 처리는 쉽지 않았기 때문이다.
plugin은 주로 전역으로 쓰이는 클래스들을 관리할 때 사용하는 편이다.
(ex.....통신이나....동일한 주제를 가진 데이터들을 관리하거나...뭐...그런 것들...여튼 그런 것들을 주로 클래스로 묶어서 플러그인으로 관리하는 편이다.)