M

MLOG

ಕನ್ನಡ

Vue.js 3 ಕಂಪೊಸಿಷನ್ APIಯನ್ನು ಆಳವಾಗಿ ಅನ್ವೇಷಿಸಿ. ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಜಾಗತಿಕ ಡೆವಲಪರ್‌ಗಳಿಗಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳೊಂದಿಗೆ ಪುನರ್ಬಳಕೆ ಮಾಡಬಹುದಾದ, ನಿರ್ವಹಿಸಬಹುದಾದ, ಮತ್ತು ಪರೀಕ್ಷಿಸಬಹುದಾದ Vue.js ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವುದು ಹೇಗೆಂದು ಕಲಿಯಿರಿ.

Vue.js 3 ಕಂಪೊಸಿಷನ್ API: ಜಾಗತಿಕ ಡೆವಲಪರ್‌ಗಳಿಗಾಗಿ ಒಂದು ಆಳವಾದ ನೋಟ

Vue.js ತನ್ನ ಸರಳ ಕಲಿಕೆಯ ಶೈಲಿ ಮತ್ತು ಶಕ್ತಿಯುತ ವೈಶಿಷ್ಟ್ಯಗಳಿಂದಾಗಿ ಆಧುನಿಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಶೀಘ್ರವಾಗಿ ಜನಪ್ರಿಯ ಆಯ್ಕೆಯಾಗಿದೆ. Vue.js 3, ಕಂಪೊಸಿಷನ್ API ಪರಿಚಯದೊಂದಿಗೆ ಇದನ್ನು ಇನ್ನಷ್ಟು ಮುಂದಕ್ಕೆ ಕೊಂಡೊಯ್ಯುತ್ತದೆ, ಇದು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ ಲಾಜಿಕ್ ಅನ್ನು ಸಂಘಟಿಸಲು ಒಂದು ಹೊಸ ಮಾರ್ಗವಾಗಿದೆ. ಈ ಆಳವಾದ ನೋಟವು ಕಂಪೊಸಿಷನ್ API ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ಬಳಸಿಕೊಳ್ಳಲು ಒಂದು ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದು ನಿಮಗೆ ಹೆಚ್ಚು ನಿರ್ವಹಿಸಬಹುದಾದ, ಪುನರ್ಬಳಕೆ ಮಾಡಬಹುದಾದ ಮತ್ತು ಪರೀಕ್ಷಿಸಬಹುದಾದ Vue ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವ ಕೌಶಲ್ಯಗಳನ್ನು ನೀಡುತ್ತದೆ.

ಕಂಪೊಸಿಷನ್ API ಎಂದರೇನು?

ಕಂಪೊಸಿಷನ್ API ಎನ್ನುವುದು ಆಯ್ಕೆಗಳನ್ನು ಘೋಷಿಸುವ ಬದಲು ಆಮದು ಮಾಡಿಕೊಂಡ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಬಳಸಿ Vue ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ನಮಗೆ ಅನುಮತಿಸುವ APIಗಳ ಒಂದು ಗುಂಪಾಗಿದೆ. ಮೂಲಭೂತವಾಗಿ, ಇದು ಸಂಬಂಧಿತ ಲಾಜಿಕ್ ಅನ್ನು ಟೆಂಪ್ಲೇಟ್‌ನಲ್ಲಿ ಎಲ್ಲಿ ಕಾಣಿಸಿಕೊಂಡರೂ ಒಟ್ಟಿಗೆ ಗುಂಪು ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇದು ಆಪ್ಷನ್ಸ್ API (data, methods, computed, watch) ಗೆ ವ್ಯತಿರಿಕ್ತವಾಗಿದೆ, ಇದು ಈ ಪೂರ್ವನಿರ್ಧರಿತ ವರ್ಗಗಳ ಆಧಾರದ ಮೇಲೆ ಕೋಡ್ ಅನ್ನು ಸಂಘಟಿಸಲು ನಿಮ್ಮನ್ನು ಒತ್ತಾಯಿಸುತ್ತದೆ. ಆಪ್ಷನ್ಸ್ API ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು *ಅದು ಏನು* (ಡೇಟಾ, ಮೆಥಡ್, ಇತ್ಯಾದಿ) ಎಂಬುದರ ಆಧಾರದ ಮೇಲೆ ಸಂಘಟಿಸುತ್ತದೆ ಎಂದು ಯೋಚಿಸಿ, ಆದರೆ ಕಂಪೊಸಿಷನ್ API ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು *ಅದು ಏನು ಮಾಡುತ್ತದೆ* ಎಂಬುದರ ಆಧಾರದ ಮೇಲೆ ಸಂಘಟಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ಕಂಪೊಸಿಷನ್ API ಯ ತಿರುಳು setup() ಫಂಕ್ಷನ್‌ನ ಸುತ್ತ ಸುತ್ತುತ್ತದೆ. ಈ ಫಂಕ್ಷನ್ ಒಂದು ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ ಕಂಪೊಸಿಷನ್ API ಅನ್ನು ಬಳಸಲು ಪ್ರವೇಶ ಬಿಂದುವಾಗಿದೆ. setup() ಒಳಗೆ, ನೀವು ರಿಯಾಕ್ಟಿವ್ ಸ್ಟೇಟ್, ಕಂಪ್ಯೂಟೆಡ್ ಪ್ರಾಪರ್ಟೀಸ್, ಮೆಥಡ್ಸ್ ಮತ್ತು ಲೈಫ್‌ಸೈಕಲ್ ಹುಕ್ಸ್‌ಗಳನ್ನು ಕಂಪೋಸಬಲ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಬಳಸಿ ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು.

ಕಂಪೊಸಿಷನ್ API ಅನ್ನು ಏಕೆ ಬಳಸಬೇಕು?

ಕಂಪೊಸಿಷನ್ API ಸಾಂಪ್ರದಾಯಿಕ ಆಪ್ಷನ್ಸ್ API ಗಿಂತ ಹಲವಾರು ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ದೊಡ್ಡ ಮತ್ತು ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ:

ಮೂಲ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ಕಂಪೊಸಿಷನ್ API ಗೆ ಆಧಾರವಾಗಿರುವ ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ನಾವು ನೋಡೋಣ:

1. setup()

ಹಿಂದೆ ಹೇಳಿದಂತೆ, setup() ಕಂಪೊಸಿಷನ್ API ಅನ್ನು ಬಳಸಲು ಪ್ರವೇಶ ಬಿಂದುವಾಗಿದೆ. ಇದು ಕಾಂಪೊನೆಂಟ್ ರಚನೆಯಾಗುವ ಮೊದಲು ಕಾರ್ಯಗತಗೊಳ್ಳುವ ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಆಯ್ಕೆಯಾಗಿದೆ. setup() ಒಳಗೆ, ನೀವು ರಿಯಾಕ್ಟಿವ್ ಸ್ಟೇಟ್, ಕಂಪ್ಯೂಟೆಡ್ ಪ್ರಾಪರ್ಟೀಸ್, ಮೆಥಡ್ಸ್ ಮತ್ತು ಲೈಫ್‌ಸೈಕಲ್ ಹುಕ್ಸ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೀರಿ, ಮತ್ತು ನಂತರ ನೀವು ಟೆಂಪ್ಲೇಟ್‌ಗೆ ಒಡ್ಡಲು ಬಯಸುವ ಮೌಲ್ಯಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತೀರಿ.

ಉದಾಹರಣೆ:

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು count ಎಂಬ ರಿಯಾಕ್ಟಿವ್ ವೇರಿಯೇಬಲ್ ಅನ್ನು ರಚಿಸಲು ref ಅನ್ನು ಬಳಸುತ್ತಿದ್ದೇವೆ. ನಾವು count ನ ಮೌಲ್ಯವನ್ನು ಹೆಚ್ಚಿಸುವ increment ಎಂಬ ಮೆಥಡ್ ಅನ್ನು ಸಹ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ. ಅಂತಿಮವಾಗಿ, ನಾವು count ಮತ್ತು increment ಅನ್ನು ಒಳಗೊಂಡಿರುವ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತೇವೆ, ಇದು ಅವುಗಳನ್ನು ಕಾಂಪೊನೆಂಟ್‌ನ ಟೆಂಪ್ಲೇಟ್‌ನಲ್ಲಿ ಲಭ್ಯವಾಗುವಂತೆ ಮಾಡುತ್ತದೆ.

2. ref ಮತ್ತು reactive ನೊಂದಿಗೆ ರಿಯಾಕ್ಟಿವ್ ಸ್ಟೇಟ್

ಕಂಪೊಸಿಷನ್ API ರಿಯಾಕ್ಟಿವ್ ಸ್ಟೇಟ್ ಅನ್ನು ರಚಿಸಲು ಎರಡು ಪ್ರಮುಖ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ: ref ಮತ್ತು reactive.

ref ಬಳಸಿ ಉದಾಹರಣೆ:

import { ref } from 'vue'

export default {
  setup() {
    const message = ref('ನಮಸ್ಕಾರ, Vue!')

    const updateMessage = (newMessage) => {
      message.value = newMessage
    }

    return {
      message,
      updateMessage
    }
  }
}

reactive ಬಳಸಿ ಉದಾಹರಣೆ:

import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      name: 'ಜಾನ್ ಡೋ',
      age: 30
    })

    const updateName = (newName) => {
      state.name = newName
    }

    return {
      state,
      updateName
    }
  }
}

3. computed ನೊಂದಿಗೆ ಕಂಪ್ಯೂಟೆಡ್ ಪ್ರಾಪರ್ಟೀಸ್

ಕಂಪ್ಯೂಟೆಡ್ ಪ್ರಾಪರ್ಟೀಸ್ ಎಂದರೆ ಇತರ ರಿಯಾಕ್ಟಿವ್ ಸ್ಟೇಟ್‌ನಿಂದ ಪಡೆದ ಮೌಲ್ಯಗಳು. ಅವುಗಳ ಅವಲಂಬನೆಗಳು ಬದಲಾದಾಗಲೆಲ್ಲಾ ಅವು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಅಪ್‌ಡೇಟ್ ಆಗುತ್ತವೆ. computed ಫಂಕ್ಷನ್ ಗೆಟರ್ ಫಂಕ್ಷನ್ ಅನ್ನು ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಓದಲು ಮಾತ್ರ ಲಭ್ಯವಿರುವ ರಿಯಾಕ್ಟಿವ್ ref ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ:

import { ref, computed } from 'vue'

export default {
  setup() {
    const firstName = ref('ಜಾನ್')
    const lastName = ref('ಡೋ')

    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`
    })

    return {
      firstName,
      lastName,
      fullName
    }
  }
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, fullName ಎಂಬುದು firstName ಮತ್ತು lastName ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುವ ಕಂಪ್ಯೂಟೆಡ್ ಪ್ರಾಪರ್ಟಿ ಆಗಿದೆ. firstName ಅಥವಾ lastName ಬದಲಾದಾಗಲೆಲ್ಲಾ, fullName ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಅಪ್‌ಡೇಟ್ ಆಗುತ್ತದೆ.

4. watch ಮತ್ತು watchEffect ನೊಂದಿಗೆ ವಾಚರ್ಸ್

ವಾಚರ್ಸ್ ನಿಮಗೆ ರಿಯಾಕ್ಟಿವ್ ಸ್ಟೇಟ್‌ನಲ್ಲಿನ ಬದಲಾವಣೆಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಕಂಪೊಸಿಷನ್ API ವಾಚರ್ಸ್ ಅನ್ನು ರಚಿಸಲು ಎರಡು ಮುಖ್ಯ ಮಾರ್ಗಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ: watch ಮತ್ತು watchEffect.

watch ಬಳಸಿ ಉದಾಹರಣೆ:

import { ref, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)

    watch(
      count,
      (newValue, oldValue) => {
        console.log(`ಎಣಿಕೆ ${oldValue} ನಿಂದ ${newValue} ಗೆ ಬದಲಾಗಿದೆ`)
      }
    )

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}

watchEffect ಬಳಸಿ ಉದಾಹರಣೆ:

import { ref, watchEffect } from 'vue'

export default {
  setup() {
    const message = ref('ನಮಸ್ಕಾರ')

    watchEffect(() => {
      console.log(`ಸಂದೇಶ: ${message.value}`)
    })

    const updateMessage = (newMessage) => {
      message.value = newMessage
    }

    return {
      message,
      updateMessage
    }
  }
}

5. ಲೈಫ್‌ಸೈಕಲ್ ಹುಕ್ಸ್

ಕಂಪೊಸಿಷನ್ API on ನಿಂದ ಪ್ರಾರಂಭವಾಗುವ ಫಂಕ್ಷನ್‌ಗಳ ಮೂಲಕ ಕಾಂಪೊನೆಂಟ್ ಲೈಫ್‌ಸೈಕಲ್ ಹುಕ್ಸ್‌ಗಳಿಗೆ ಪ್ರವೇಶವನ್ನು ಒದಗಿಸುತ್ತದೆ, ಉದಾಹರಣೆಗೆ onMounted, onUpdated, ಮತ್ತು onUnmounted. ಈ ಫಂಕ್ಷನ್‌ಗಳು ಕಾಲ್‌ಬ್ಯಾಕ್ ಅನ್ನು ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ತೆಗೆದುಕೊಳ್ಳುತ್ತವೆ, ಇದು ಸಂಬಂಧಿತ ಲೈಫ್‌ಸೈಕಲ್ ಹುಕ್ ಪ್ರಚೋದನೆಗೊಂಡಾಗ ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತದೆ.

ಉದಾಹರಣೆ:

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('ಕಾಂಪೊನೆಂಟ್ ಮೌಂಟ್ ಆಗಿದೆ')
    })

    onUnmounted(() => {
      console.log('ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆಗಿದೆ')
    })

    return {}
  }
}

ಕಂಪೋಸಬಲ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ರಚಿಸುವುದು

ಕಂಪೊಸಿಷನ್ API ಯ ನಿಜವಾದ ಶಕ್ತಿಯು ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಕಂಪೋಸಬಲ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ರಚಿಸುವ ಸಾಮರ್ಥ್ಯದಿಂದ ಬರುತ್ತದೆ. ಕಂಪೋಸಬಲ್ ಫಂಕ್ಷನ್ ಎನ್ನುವುದು ಕಾಂಪೊನೆಂಟ್ ಲಾಜಿಕ್‌ನ ಒಂದು ಭಾಗವನ್ನು ಒಳಗೊಂಡಿರುವ ಮತ್ತು ಬಹು ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ಬಳಸಬಹುದಾದ ರಿಯಾಕ್ಟಿವ್ ಸ್ಟೇಟ್ ಮತ್ತು ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಹಿಂತಿರುಗಿಸುವ ಒಂದು ಫಂಕ್ಷನ್ ಆಗಿದೆ.

ಉದಾಹರಣೆ: ಮೌಸ್ ಸ್ಥಾನವನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುವ ಕಂಪೋಸಬಲ್ ಫಂಕ್ಷನ್ ಅನ್ನು ರಚಿಸೋಣ:

import { ref, onMounted, onUnmounted } from 'vue'

export function useMousePosition() {
  const x = ref(0)
  const y = ref(0)

  const updatePosition = (event) => {
    x.value = event.clientX
    y.value = event.clientY
  }

  onMounted(() => {
    window.addEventListener('mousemove', updatePosition)
  })

  onUnmounted(() => {
    window.removeEventListener('mousemove', updatePosition)
  })

  return {
    x,
    y
  }
}

ಈಗ, ನೀವು ಈ ಕಂಪೋಸಬಲ್ ಫಂಕ್ಷನ್ ಅನ್ನು ಯಾವುದೇ ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ ಬಳಸಬಹುದು:

import { useMousePosition } from './useMousePosition'

export default {
  setup() {
    const { x, y } = useMousePosition()

    return {
      x,
      y
    }
  }
}

ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಬಳಕೆಯ ಸಂದರ್ಭಗಳು

ನೈಜ-ಪ್ರಪಂಚದ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ ಕಂಪೊಸಿಷನ್ API ಅನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದರ ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ:

1. ಡೇಟಾ ಫೆಚಿಂಗ್

API ನಿಂದ ಡೇಟಾವನ್ನು ತರಲು ಕಂಪೋಸಬಲ್ ಫಂಕ್ಷನ್ ಅನ್ನು ರಚಿಸುವುದು ಸಾಮಾನ್ಯ ಬಳಕೆಯಾಗಿದೆ. ಇದು ಒಂದೇ ಡೇಟಾ-ಫೆಚಿಂಗ್ ಲಾಜಿಕ್ ಅನ್ನು ಅನೇಕ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ಮರುಬಳಕೆ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

import { ref, onMounted } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(true)

  onMounted(async () => {
    try {
      const response = await fetch(url)
      data.value = await response.json()
    } catch (err) {
      error.value = err
    } finally {
      loading.value = false
    }
  })

  return {
    data,
    error,
    loading
  }
}

ನಂತರ ನೀವು ಈ ಕಂಪೋಸಬಲ್ ಫಂಕ್ಷನ್ ಅನ್ನು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ಹೀಗೆ ಬಳಸಬಹುದು:

import { useFetch } from './useFetch'

export default {
  setup() {
    const { data, error, loading } = useFetch('https://api.example.com/data')

    return {
      data,
      error,
      loading
    }
  }
}

2. ಫಾರ್ಮ್ ಮೌಲ್ಯೀಕರಣ

ಫಾರ್ಮ್ ಮೌಲ್ಯೀಕರಣವು ಕಂಪೊಸಿಷನ್ API ತುಂಬಾ ಸಹಾಯಕವಾಗಬಲ್ಲ ಮತ್ತೊಂದು ಕ್ಷೇತ್ರವಾಗಿದೆ. ನೀವು ಮೌಲ್ಯೀಕರಣ ಲಾಜಿಕ್ ಅನ್ನು ಒಳಗೊಂಡಿರುವ ಕಂಪೋಸಬಲ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು ಮತ್ತು ಅವುಗಳನ್ನು ವಿವಿಧ ಫಾರ್ಮ್‌ಗಳಲ್ಲಿ ಮರುಬಳಕೆ ಮಾಡಬಹುದು.

import { ref } from 'vue'

export function useValidation() {
  const errors = ref({})

  const validateField = (fieldName, value, rules) => {
    let error = null
    for (const rule of rules) {
      if (rule === 'required' && !value) {
        error = 'ಈ ಕ್ಷೇತ್ರವು ಅಗತ್ಯವಿದೆ'
        break
      } else if (rule === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
        error = 'ಅಮಾನ್ಯ ಇಮೇಲ್ ಫಾರ್ಮ್ಯಾಟ್'
        break
      }
    }

    if (error) {
      errors.value[fieldName] = error
    } else {
      delete errors.value[fieldName]
    }
  }

  return {
    errors,
    validateField
  }
}

ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ ಬಳಕೆ:

import { useValidation } from './useValidation'
import { ref } from 'vue'

export default {
  setup() {
    const { errors, validateField } = useValidation()
    const email = ref('')

    const validateEmail = () => {
      validateField('email', email.value, ['required', 'email'])
    }

    return {
      email,
      errors,
      validateEmail
    }
  }
}

3. ಬಳಕೆದಾರರ ದೃಢೀಕರಣವನ್ನು ನಿರ್ವಹಿಸುವುದು

ದೃಢೀಕರಣ ಲಾಜಿಕ್ ಆಗಾಗ್ಗೆ ಸಂಕೀರ್ಣವಾಗಿರುತ್ತದೆ ಮತ್ತು ಅನೇಕ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ನಕಲು ಮಾಡಲಾಗುತ್ತದೆ. ಕಂಪೊಸಿಷನ್ API ನಿಮಗೆ ಎಲ್ಲಾ ದೃಢೀಕರಣ ಲಾಜಿಕ್ ಅನ್ನು ಒಳಗೊಂಡಿರುವ ಕಂಪೋಸಬಲ್ ಫಂಕ್ಷನ್ ಅನ್ನು ರಚಿಸಲು ಮತ್ತು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಬಳಸಲು ಸ್ವಚ್ಛವಾದ API ಅನ್ನು ಒದಗಿಸಲು ಅನುಮತಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ: (ಸರಳೀಕೃತ)

import { ref } from 'vue'

export function useAuth() {
  const isLoggedIn = ref(false)
  const user = ref(null)

  const login = async (username, password) => {
    // API ಕರೆಯನ್ನು ಅನುಕರಿಸುವುದು
    await new Promise(resolve => setTimeout(resolve, 1000))
    isLoggedIn.value = true
    user.value = { username }
  }

  const logout = async () => {
    // API ಕರೆಯನ್ನು ಅನುಕರಿಸುವುದು
    await new Promise(resolve => setTimeout(resolve, 1000))
    isLoggedIn.value = false
    user.value = null
  }

  return {
    isLoggedIn,
    user,
    login,
    logout
  }
}

ಕಂಪೊಸಿಷನ್ API ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಕಂಪೊಸಿಷನ್ API ನಿಂದ ಹೆಚ್ಚಿನದನ್ನು ಪಡೆಯಲು, ಈ ಕೆಳಗಿನ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಪರಿಗಣಿಸಿ:

ಸಾಮಾನ್ಯ ಅಪಾಯಗಳು ಮತ್ತು ಅವುಗಳನ್ನು ತಪ್ಪಿಸುವುದು ಹೇಗೆ

ಕಂಪೊಸಿಷನ್ API ಅನೇಕ ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತದೆಯಾದರೂ, ಕೆಲವು ಸಾಮಾನ್ಯ ಅಪಾಯಗಳ ಬಗ್ಗೆ ತಿಳಿದಿರಬೇಕು:

ಕಂಪೊಸಿಷನ್ API ಮತ್ತು ಜಾಗತಿಕ ತಂಡಗಳು

ಕಂಪೊಸಿಷನ್ API ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಉತ್ತೇಜಿಸುವ ಮೂಲಕ ಜಾಗತಿಕ ಅಭಿವೃದ್ಧಿ ತಂಡಗಳಲ್ಲಿ ಸಹಯೋಗವನ್ನು ಬೆಳೆಸುತ್ತದೆ:

ತೀರ್ಮಾನ

Vue.js 3 ಕಂಪೊಸಿಷನ್ API ಒಂದು ಶಕ್ತಿಯುತ ಸಾಧನವಾಗಿದ್ದು, ಇದು ನಿಮ್ಮ Vue ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಸಂಘಟನೆ, ಪುನರ್ಬಳಕೆ ಮತ್ತು ಪರೀಕ್ಷಾಸಾಧ್ಯತೆಯನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸುತ್ತದೆ. ಈ ಆಳವಾದ ನೋಟದಲ್ಲಿ ವಿವರಿಸಿದ ಮೂಲ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ, ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಹೆಚ್ಚು ನಿರ್ವಹಿಸಬಹುದಾದ ಮತ್ತು ಸ್ಕೇಲೆಬಲ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ನೀವು ಕಂಪೊಸಿಷನ್ API ಅನ್ನು ಬಳಸಿಕೊಳ್ಳಬಹುದು. ಕಂಪೊಸಿಷನ್ API ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು Vue.js 3 ರ ಸಂಪೂರ್ಣ ಸಾಮರ್ಥ್ಯವನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ.

ನಿಮ್ಮ ಸ್ವಂತ ಯೋಜನೆಗಳಲ್ಲಿ ಕಂಪೊಸಿಷನ್ API ನೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡಲು ಮತ್ತು ಅದು ನೀಡುವ ವಿಶಾಲ ಸಾಧ್ಯತೆಗಳನ್ನು ಅನ್ವೇಷಿಸಲು ನಾವು ನಿಮ್ಮನ್ನು ಪ್ರೋತ್ಸಾಹಿಸುತ್ತೇವೆ. ಹ್ಯಾಪಿ ಕೋಡಿಂಗ್!