61 / 67
Как разделить бизнес-логику и UI-логику в Vue?
Бизнес-логика (что делать) выносится в composables и domain-слой. UI-логика (как показать) остаётся в компонентах. Компонент вызывает composable, получает данные и рендерит. Composable не знает о DOM, компонент не знает о бизнес-правилах.
JavaScript
// composable -- бизнес-логика
function useCheckout() {
const canProceed = computed(() => cart.items.length > 0 && user.isVerified)
async function placeOrder() { /* ... */ }
return { canProceed, placeOrder }
}
// компонент -- UI-логика
// <button :disabled="!canProceed" @click="placeOrder">Оформить</button>