Vue 3에서 setup() 내부에서 여러 개의 composable 파일 사용하기

/src
 ├── /composables
 │   ├── useCommon.js
 │   ├── useExtra.js
 │   ├── useUser.js
 │   ├── useProduct.js
 ├── /components
 │   ├── MyComponent.vue

 

<template>
  <div>
    <h2>{{ message }}</h2>
    <button @click="greet">인사하기</button>
    <button @click="sayGoodbye">작별 인사</button>

    <h3>사용자: {{ userName }}</h3>
    <button @click="changeName('이순신')">이름 변경</button>

    <h3>상품 목록</h3>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }}
      </li>
    </ul>
    <button @click="addProduct({ id: 3, name: '상품 C' })">상품 추가</button>
  </div>
</template>

<script>
import { useCommon } from "@/composables/useCommon.js";
import { useExtra } from "@/composables/useExtra.js";
import { useUser } from "@/composables/useUser.js";
import { useProduct } from "@/composables/useProduct.js";

export default {
  setup() {
    // 각 composable을 호출하여 필요한 데이터와 메서드 가져오기
    const common = useCommon();
    const extra = useExtra();
    const user = useUser();
    const product = useProduct();

    // 여러 composable의 결과를 하나로 합쳐서 반환
    return {
      ...common,
      ...extra,
      ...user,
      ...product
    };
  }
};
</script>

 

같은 이름의 함수 처리방법 (충돌방지)

1. 이름 변경

    // 별칭을 사용하여 함수 이름 변경
    const { greet: commonGreet } = useCommon();
    const { greet: extraGreet } = useExtra();

 

2. 객체로 반환

    const common = useCommon();
    const extra = useExtra();

 

3. reactive() 로 한번 더 감싸기

    const state = reactive({
      common: useCommon(),
      extra: useExtra()
    });

 

4. 새로운 함수로 감싸기

    // setup()에서 새 함수로 감싸기
    const handleCommonGreet = () => {
      common.greet();
    };

 

5. index.js 에서 별칭 정리하기

/src/composables
 ├── useCommon.js
 ├── useExtra.js
 ├── index.js  (여기서 별칭 정리)

 

index.js

export { useCommon as useCommonGreet } from "./useCommon";
export { useExtra as useExtraGreet } from "./useExtra";

import { useCommonGreet, useExtraGreet } from "@/composables";

 

 

참고: 객체 구조 분해 할당시 이름 변경 (별칭 Alias)

const { greet: commonGreet } = useCommon(); 

greet 함수의 구조 분해 할당시..이름을 commonGreet 로 변경해 주는 Alias 표현식이다.