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>