728x90
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");
728x90
'vue.js' 카테고리의 다른 글
Vue의 전역 상태관리 라이브러리 VueX (1) | 2024.02.28 |
---|---|
Vue의 컴포넌트 심화2(이벤트/ 데이터 전달) (1) | 2024.02.28 |
Vue의 컴포넌트 심화(중첩 컴포넌트) (0) | 2024.02.28 |
Vue의 렌더링 문법 (0) | 2024.02.28 |
Vue의 컴포넌트와 데이터 바인딩 (0) | 2024.02.27 |