Vue의 Mixins

Mixins

- 공통 모듈에 해당하는 파일을 만들어서 사용하는 방법
- 기능은 따로 구현하고, 필요할 때마다 mixins 파일을 컴포넌트에 결합해서 사용하는 방법
- main.js에서 전역으로 mixins 파일을 설정할 수 있음
- mixins는 기본적으로 메서드 앞에 $가 붙음

 

사용방법

1. 먼저 src/mixins.js 파일을 생성한 뒤, 사용할 메서드를 설정해야 한다.

// scr/mixins.js

import axios from "axios";

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

 

2. 사용하고자 하는 컴포넌트에서 mixins를 정의한 뒤, this. 키워드를 통해 해당 메서드에 접근하면 된다.

<!-- 사용하고자 하는 컴포넌트 -->

<script>
import ApiMixin from "../mixins.js";
export default {
  mixins: [ApiMixin],

  data() {
    return {
      productList: [],
    };
  },

  async mounted() {
    this.productList = await this.$callAPI(
      "https://12e591e7-a5d1-426c-a139-ae4455013f8e.mock.pstmn.io/list",
      "get"
    );
    console.log(this.productList);
  },
};
</script>

 

3. 전역으로 사용하는 방법은 main.js에 .use 키워드를 통해 mixins을 적용시켜 주면 된다.

// main.js

import { createApp } from "vue";
import App from "./App.vue";
import mixins from "./mixins";

const app = createApp(App);
app.mixin(mixins);
app.mount("#app");