컴포넌트들 사이에서 공통 함수(모듈)를 만들 수 있게끔 해 주는 기능

api.js 파일을 만들어 준다. 서버에 API 요청을 주는 믹스인 함수를 만들 것이다. 그리고 methos 객체를 반환한다.

$callAPI 앞에 $가 붙는 이유는 public한 인스턴스의 속성이 다른 인스턴스의 속성과 충돌되는 것을 방지하기 위해 사용한다. 즉, 중복 방지가 목적이다.

import axios from "axios";

export default {
  methods: {
    **async $callAPI(url, method, data) {
      return await axios({
        method,
        url,
        data,
      }).catch((e) => {
        console.log(e)
      })
    }**
  }
}

이렇게 export한 믹스인 함수를 사용하기 위해서는 해당 파일을 import한 뒤 mixins 속성에 넣어주고, this 객체를 통해 접근하면 된다.

// views/MixinTest.vue

<template>
  <div>
		...
  </div>
</template>

<script>
**import ApiMixin from '../api'**

export default {
  name: 'MixinTest',
  **mixins: [ApiMixin],**
  data() {
    return {
      userList: [],
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    async getUserList() {
      const res = await **this.$callAPI**(
        '<https://74d6fb51-cb10-4989-8a39-5528af823cb3.mock.pstmn.io/user_list_get>',
        'get',
        {}
      )
      this.userList = res.data
      console.log(this.userList)
    },
  },
}
</script>

믹스인 함수 안에서의 라이프사이클 훅

같은 라이프사이클 훅에 대해서 믹스인 → 컴포넌트 순으로 실행된다.

// api.js

import axios from "axios";

export default {
  **mounted() {
    console.log('mixin in mounted')
  },**
  methods: {
    ...
  }
}

<script>
import ApiMixin from '../api'

export default {
  name: 'ServerDataView',
  mixins: [ApiMixin],
  data() {
    return {
      userList: [],
    }
  },
  **mounted() {
    console.log('component mounted')
  },**
  methods: {
    async getUserList() {
      const res = await this.$callAPI(
        '<https://74d6fb51-cb10-4989-8a39-5528af823cb3.mock.pstmn.io/user_list_get>',
        'get',
        {}
      )
      this.userList = res.data
      console.log(this.userList)
    },
  },
}
</script>

결과

mixin in mounted

component mounted

믹스인 글로벌 등록

main.js에서 import한 후 사용할 수 있다.

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
**import mixins from './mixins'**

const app = createApp(App)
app.use(router)
**app.mixin(mixins)**
app.mount('#app')