컴포저블 | Vue.js

컴포저블이란?#

Vue 앱의 컨텍스트에서 컴포저블은 Vue Composition API로 활용하여 상태 저장 로직를 캡슐화하고 재사용하는 함수입니다.

• 여러 위치에서 날짜 형식을 지정해야 할 때, 재사용 가능한 함수를 생성 ⇒ 상태 비저장 로직을 캡슐화한 것. ( 일부 입력을 받고 즉시 계산된 값 반환 ) 상태 비저장 로직 재사용을 위한 많은 라이브러가있다. *예 lodash, date-fns

상태 저장 로직은 상태 관리가 포함

학습목표
- 상태 저장 로직을 Composable함수로 분리
- 다른 컴포넌트에서 재사용

🔷 Composable함수로 분리

상태 저장 로직( AppAlert ) 적용

• BoardCreateView.vue

  // template
  <AppAlert :items="alerts" />
  
  // script
  const saveBoard = async () => {
    try {
  	  ...
      // router.push({ name: 'BoardList' })
      vSuccess('Edit complete!')
    } ...
  }
  
  const alerts = ref([])
  
  const vAlert = (msg, type) => {
    alerts.value.push({ msg, type })
    setTimeout(() => {
      // showAlert.value = false
      alerts.value.shift()
    }, 3000)
  }
  
  const vSuccess = (msg) => vAlert(msg, 'success')
  

  

const alerts = ref([])

const vAlert = (msg, type) => {
  alerts.value.push({ msg, type })
  setTimeout(() => {
    // showAlert.value = false
    alerts.value.shift()
  }, 3000)
}
const vSuccess = (msg) => vAlert(msg, 'success')

<aside> 🧑‍💻

이러한 ‘상태 저장 로직’을 사용하는 컴포넌트마다 복붙할 꺼가?

🗣️ ”Nope!” ⇒ Composable 함수로 분리하기

</aside>