64. <vue-news> 프로젝트 | Mixins (여러 컴포넌트 간에 공통으로 사용되고 있는 로직, 기능들을 재사용하는 방법)

믹스인은 여러 컴포넌트 간에 공통으로 사용되고 있는 로직, 기능들을 재사용하는 방법입니다.

믹스인에 정의할 수 있는 재사용 로직은 data, methods, created 등과 같은 컴포넌트 입니다.

 

믹스인 코드 형식

var HelloMixins = {
	//컴포넌트 옵션 (data, methods, created 등)
};

new Vue({
	mixins: [HelloMixins]
})

위와 같이 믹스인을 주입할 컴포넌트에 mixins 속성을 선언하고 배열 [] 안에 주입할 믹스인들을 추가합니다.

---

---

routes 폴더 <index.js>

import Vue from 'vue'
import VueRouter from 'vue-router'
import NewsView from '../views/NewsView.vue'
import AskView from '../views/AskView.vue'
import JobsView from '../views/JobsView.vue'
import ItemView from '../views/ItemView.vue'
import UserView from '../views/UserView.vue'
// import createListView from '../views/CreateListView'

Vue.use(VueRouter);

export const router = new VueRouter({
    mode: 'history', // url #값 제거
    routes: [ //routes도 커졌을때 모듈화 가능
        {
            path: '/',// url에 대한 정보가 담기는곳, url주소
            redirect: '/news',// url 주소로 갔을때 표시될 컴포넌트
            
        },
        {
            path: '/news', 
            component: NewsView, 
            name: 'news',
            // 하이 오더 컴포넌트
            // 기존에 있던 컴포넌트 위에 컴포넌트가 하나 더 생김
            // component: createListView('NewsView'),

        },
        {
            path: '/ask',
            component: AskView,
            name: 'ask',
            // component: createListView('AskView'),
        },
        {
            path: '/jobs',
            component: JobsView,
            name: 'jobs',
            // component: createListView('JobsView'),
        },
        {
            path: '/item/:id',
            component: ItemView,
        },
        {
            path: '/user/:id',
            component: UserView,
        },
    ]
});

---

<ListMixin.js>

import bus from '../utils/bus.js'
// mixins
export default {
    // 재사용할 컴포넌트 옵션 & 로직
    created() {
        bus.$emit('start:spinner');

        setTimeout(() => {
            this.$store.dispatch('FETCH_LIST', this.$route.name)
                .then(() => {
                    console.log('fetched')
                    bus.$emit('end:spinner');
                })
                .catch((error) => {
                    console.log(error);
                });
        }, 3000)
    }
}

---

<NewsView.vue>

하이 오더 컴포넌트 보다 컴포넌트 하나가 줄어있음

<template>
    <div>
        <list-item></list-item>
    </div>
</template>

<script>
import ListItem  from '../components/listItem.vue';
import ListMixin from '../mixins/ListMixin.js';

export default {   
  components:{
     ListItem
  },
  mixins: [ListMixin]
};
</script>

<style scoped>

</style>

---