Reusable Logic with Composables

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ဒီခန်းပြီးရင် ဘာတတ်သွားမလဲ

Composable တည်ဆောက်ရန်
Reactive state နှင့် functions ပြန်ပေးရန်
Cleanup ထည့်ရန်

ရိုးရိုးလေး ရှင်းပြမယ်

Composable သည် Vue Composition API ကိုအသုံးပြုပြီး stateful logic ကိုထုပ်ပိုးထားသော function ဖြစ်သည်။ နာမည်ကို use ဖြင့်စတင်လေ့ရှိသည်။ UI markup မပါဘဲ state, computed values နှင့် actions ကိုပြန်ပေးသင့်သည်။

javascript

// useCounter.js
import { ref, computed } from 'vue'

export function useCounter(initial = 0) {
  const count = ref(initial)
  const doubled = computed(() => count.value * 2)
  const increment = () => count.value++
  return { count, doubled, increment }
}

// component
const { count, doubled, increment } = useCounter(5)

You should see

count = 5
doubled = 10

လက်တွေ့စမ်းကြည့်ရန်

loading, data, error နှင့် execute function ပြန်ပေးသော useFetch composable တစ်ခုရေးပါ။

Composables — Vue.js

ဒီနေရာမှာ လူအများမှားတတ်တယ်

Composable ကို component အပြင်ဘက်တွင် random scope မှခေါ်ခြင်း
Reactive value ကို plain value အဖြစ်ဖြည်ပြီး reactivity ဆုံးရှုံးခြင်း

လေ့ကျင့်ခန်း

loading, data, error နှင့် execute function ပြန်ပေးသော useFetch composable တစ်ခုရေးပါ။

You'll know it worked when: count = 5 doubled = 10