[Vue3]Composable이란?

composable은 vue의 compositionAPI를 활용하여
1. 상태 저장 비지니스 로직을 캡슐화
2. 재사용하는 기능

흠 정리하면서도 어렵긴 한데

composable은 상태 저장 로직을 사용하면서
변경되는 상태 관리가 포함된다고 한다.

✅ 만드는 방법

src폴더 하위에 composables이라는 폴더를 만들어주고
그 안에 만들고자 하는 composable 파일을 만들어준다.

강의에서는 alert.js로 만들어줬다.

함수 이름은 'use'를 앞에 넣어주는게 관례라고 한다.
ex) useAlert()

// composable폴더 안의 alert.js파일

import { ref } from 'vue'

export function useAlert() {
  const alerts = ref([])
  const vAlert = (message, type = 'error') => {
    alerts.value.push({ message, type })
    setTimeout(() => {
      alerts.value.shift()
    }, 2000)
  }
  const vSuccess = message => vAlert(message, 'success')
  // return한 것들은 해당 컴포넌트에서 사용해야하는 상태나 메소드! 
  return {
    alerts,
    vAlert,
    vSuccess,
  }
}

✅ 사용하는 방법

<script setup>

**import { useAlert } from "@/composables/alert";

const { alerts, vAlert, vSuccess } = useAlert;**

코드생략 

const save = () => {
  try {
    const data = { ...form.value, createdAt: Date.now() };
    createPost(data);
   ** vSuccess('등록이 완료되었습니다.')**
  } catch (error) {
    console.log(error);
   ** vAlert(error.message)**
  } 
   코드생략
};
</script>

---

axios를 컴포저블 함수로 만드는 것도 강의에서 알려준다.
잘 정리해보쟈!
미래의 나.. 이거 읽고 이해할 수 있지..?ㅠㅅ ㅠ

✅ axios 컴포저블 함수 구현

아래 코드는 여러 컴포넌트에서 반복적으로 사용하고 있는 코드다.
그리고 fetchPosts() 안의 로직에 따라서 반응형 변수의 상태가 달라지고 있다.

그래서 fetchPosts()와 같은 상태 관리 비지니스 로직을
composable 함수로 만들어 볼 수 있다.

const posts = ref([]);
const loading = ref(false);
const error = ref(null);

const fetchPosts = async () => {
  try {
    loading.value = true;
    const { data, headers } = await getPosts(params.value);
    posts.value = data;
    totalCount.value = headers["x-total-count"];
  } catch (err) {
    error.value = err;
  } finally {
    loading.value = false;
  }
};

..으음 axios를 composable 만드는건 이해가 안간다.
강의 다시보고 이해가 될 때 정리하기루!!!

vue3-use-axios로 검색하면 다양한 레퍼런스가 있고,
vueUse라는 컴포저블 기반의 유틸리티가 있는 라이브러리가 있다.
이것도 한 번 참고해보면 좋다고 한다!