mixin 간단 정리

 

mixin

• vue 컴포넌트에 비슷한 기능들을 재사용할 수 있는 방법
• 재사용 로직은 data, methods, created 등과 같은 컴포넌트 옵션

 

 

mix 형식

// mixin 정의
var mixins = {
  // 컴포넌트 옵션 (data, methods, created 등)
};

// mixin 주입
new Vue({
  mixins: [mixins]
})

 

 

 

만들면서 이해해보자

/mixin1 링크 이동 시 A 페이지,

/mixin2 링크 이동 시 B 페이지를 띄우며

각 페이지의 데이터를 mixin 을 통해 불러오자

 

 

일단, route 연결

// routes/index.js

export const router = new VueRouter({
  routes: [
    {
      path: '/mixin1',
      name: 'mixin1',
      component: AView,
    },
    {
      path: '/mixin2',
      name: 'mixin2',
      component: BView,
    },
  ]
})

 

 

 

데이터 호출하는 mixin 생성하기

// mixin.js

// 믹스인을 호출한 컴포넌트에서 재사용된다
export default {
  // 재사용할 컴포넌트 옵션
  created() {
    // 패치
    this.$store.dispatch('FETCH_DATA', this.$route.name);
  }
}

 

router name에 따라서 FETCH_DATA 호출 시 api를 분기 처리하도록 하였다.

 

 

이제 AView와 BView 컴포넌트를 구현

// AView.vue
// BView.vue

<template>
  <div>
    <mixin-list-comp></mixin-list-comp>
  </div>
</template>

<script>
import MixinListComp from '../components/MixinListComp.vue'
import ListMixin from '../mixins/Mixin.js'

export default {
  components: { MixinListComp },
	// ★ 주입!
  mixins: [ ListMixin ],
}
</script>

 

둘 다 같은 디자인에 같은 state 데이터를 호출할거기 때문에

공통 컴포넌트(ListComp)를 활용했으며, mixin을 주입하였다.

 

 

 

// ListComp.vue

<template>
  <div>
     <ul>
      <li v-for="(item, index) in List" :key="index">
        <div>
          <!-- 여기서 호출하는 데이터에 따라 분기를 다양하게 가능 -->
          <template>
            <div>
              {{ item }}
            </div>
          </template>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    mixinListItem() {
      return this.$store.state.List;
    }
  }
}
</script>

 

공통 컴포넌트 (ListComp)는 그저 router name에 따라 분기 호출한 데이터를 뿌려주기만 하면 됩니다.

 

 

끝

 

 

mixin은 아주 간단!

회사에서 로딩바나 글자 포맷팅에 주로 사용했는데 api 호출에도 활용하기도 하네요.

vue3에는 mixin 대신 composables을 활용한다는데 이 내용도 다음에 정리해보겠습니다.