Apa itu Vue.js Composable ?

Vue 3 memperkenalkan Composition API, yang sejak saat itu telah mengejutkan komunitas. Menurut pendapat saya, satu-satunya fitur terbaik dari Composition API adalah kemampuan untuk mengekstrak status dan fungsionalitas reaktif ke dalam modul atau "composables" yang dapat digunakan kembali.

Apa yang Dapat Dikomposisi?

Jadi, apa itu Vue.js Composable? Anda hampir dapat menganggap composables sebagai API Komposisi yang setara dengan mixin untuk API Opsi. Mereka menyediakan cara untuk mendefinisikan data reaktif dan logika yang terpisah dari komponen tertentu. Tidak hanya itu, tetapi mereka melakukannya dengan lebih baik... jauh lebih baik. Plus, mereka juga melakukan sedikit lebih banyak.

Masalah Serupa Composables dan Mixin Memecahkan

Mari kita mulai dengan melihat bagaimana composables dan mixin sama. Sama seperti mixin, composables memungkinkan kita untuk mengekstrak data reaktif, metode, dan properti yang dihitung dan dengan mudah menggunakannya kembali di antara beberapa komponen.

Composables vs Mixins

Jika composables dan mixin memiliki tujuan yang sama, lalu mengapa memperkenalkan komponen ketika kita sudah memiliki mixin? 2 alasan:

1. Mereka dapat memecahkan masalah yang sama dengan lebih baik
2. Dan mereka dapat memecahkan lebih banyak masalah

Kejelasan Sumber Data/Metode

Mixin = Sumber Data Dikaburkan

Menggunakan mixin akhirnya mengaburkan sumber data dan metode reaktif, terutama ketika banyak mixin digunakan untuk satu komponen atau mixin telah terdaftar secara global.

//MyComponent.vue
import ProductMixin from './ProductMixin'
import BrandMixin from './BrandMixin'
import UserMixin from './UserMixin'
export default{
    mixins:[ProductMixin, BrandMixin, UserMixin],
    created(){
        // Where in the world did name come from? 
        // Let me look through each of the registered mixins to find out
        // Oh man, it's not in any of them...
        // It must be from a globally registered mixin
        console.log(this.site)

        // Oh, I got lucky here turns out the first mixin I inspected has the name
        console.log(this.name)
    }
}

Composables = Sumber Data dan Fungsi Transparan

Namun, dengan menggunakan composables, kami dapat mengetahui dengan tepat dari mana data dan fungsi kami yang dapat digunakan kembali berasal. Itu karena kita harus mengimpor yang dapat dikomposisi dan kemudian secara eksplisit menggunakan destructuring untuk mendapatkan data dan fungsi kita.

//MyComponent.vue
import useProduct from './useProduct'
import useBrand from './useBrand'
import useUser from './useUser'
export default{
    setup(){
        const { name } = useProduct()

        return { name }
  }
    created(){
        // Where in the world did name come from? 
        // ah, it's not in setup anywhere... this doesn't exist and is an error
        console.log(this.site)

        // Oh, nice I can see directly in setup this came from useProduct
        console.log(this.name)
    }
}

Tabrakan Penamaan

Mixin = Risiko Tabrakan Penamaan

Menggunakan contoh mixin yang sama dari atas, bagaimana jika 2 mixin benar-benar mendefinisikan nameproperti data? Hasilnya adalah data dari mixin terakhir akan menang dan data di mixin lainnya akan hilang.

//MyComponent.vue

import ProductMixin from './ProductMixin' // name = AirMax
import BrandMixin from './BrandMixin' // name = Nike
import UserMixin from './UserMixin' // name = John Doe
export default{
    mixins:[ProductMixin, BrandMixin, UserMixin],
    created(){  
        // Actually I'm not so lucky,
        // yeah I found the name in ProductMixin
        // but turns out UserMixin had a name too
        console.log(this.name) // John Doe
    }
}

Composables = NO risiko penamaan tabrakan

Namun ini tidak terjadi, dengan composables. Composables dapat mengekspos data atau fungsi dengan nama yang sama tetapi kemudian komponen yang mengkonsumsi dapat mengganti nama variabel tersebut sesuka hati.

//MyComponent.vue
import useProduct from './useProduct' // name = AirMax
import useBrand from './useBrand' // name = Nike
import useUser from './useUser' // name = John Doe
export default{
    setup(){
        const { name: productName } = useProduct()
        const { name: brandName } = useBrand()
        const { name: userName } = useUser()

        return { productName, brandName, userName }
  }
    created(){
        // Yay! Nothing is lost and I can get the name of each of the things
        // together in my component but when writing the composables
        // I don't have to think at all about what variable names might collide
        // with names in other composables
        console.log(this.productName)
        console.log(this.brandName)
        console.log(this.userName)
    }
}

Mutasi Data Reaktif Modul dari Komponen

Biasanya kita ingin modul yang dapat digunakan kembali (mixin atau composable) dapat secara langsung mengubah nilai data reaktif tertentu tanpa memberikan kemampuan itu kepada komponen yang mengkonsumsi.

Mixins = TIDAK Dapat Menjaga Data Reaktif Sendiri

Ambil RequestMixincontoh.

// RequestMixin.js
 export default {
  data(){
        return {
            loading: false,
            payload: null
        }
  },
    methods:{
        async makeRequest(url){
            this.loading = true
            const res = await fetch(url)
            this.payload = await res.json()
            this.loading = false
        }
    }
}

Dalam hal ini, kita mungkin TIDAK ingin komponen yang mengkonsumsi secara sewenang-wenang mengubah nilai loadingor payload. Namun, dengan mixin itu tidak mungkin. Mixin tidak memiliki mekanisme untuk mengamankan data tersebut.

Composables = Dapat Menjaga Data Reaktif Sendiri

Sekarang bandingkan dengan logika yang sama yang ditulis sebagai yang dapat dikomposisi.

// useRequest.js
import { readonly, ref } from "vue";
export default () => {
    // data
  const loading = ref(false);
  const payload = ref(null);

    // methods
  const makeRequest = async (url) => {
    loading.value = true;
    const res = await fetch(url);
    payload.value = await res.json();
  };

    // exposed
  return {
    payload: readonly(payload), //notice the readonly here
    loading: readonly(loading), // and here
    makeRequest
  };
};

Di dalam komposisi ini, kita dapat mengubah nilai pemuatan dan muatan yang kita inginkan, tetapi segera setelah kita mengeksposnya ke komponen konsumsi apa pun, kita membuatnya hanya bisa dibaca.