Blog

Vue.js Composables, Vue.js ekosistemi içindeki bir tasarım deseni ve yapısal bir öğedir. Composables, Vue.js uygulamalarınızdaki mantığı ve işlevselliği paylaşmak ve yönetmek için kullanılan yeniden kullanılabilir fonksiyonlardır.

Composables, genellikle bir işlevsellik kümesini gruplamak ve bu işlevselliği bir bileşen içinde değil, başka yerlerde (örneğin, başka bir dosyada veya başka bir bileşende) kullanmak için tasarlanmıştır. Bu, kodunuzu daha düzenli hale getirmenize, tekrar kullanılabilir parçalar oluşturmanıza ve bileşenler arasında mantığı kolayca paylaşmanıza yardımcı olabilir.

Bir Vue.js Composable, genellikle bir JavaScript fonksiyonu olarak tanımlanır ve genellikle belirli bir görevi yerine getirmek üzere tasarlanmıştır. Composables, kullanıcılara bir bağlam sağlamak ve genellikle reactive (reaktif) Vue özelliklerini kullanarak durum yönetimini kolaylaştırmak için tasarlanmıştır.

İşte basit bir örnek:

    

        

            javascript
        
        

            
                // useCounter.js
                
import { ref } from 'vue';
    
                
export  function  useCounter () {
                
const count = ref(0);
    
                
function  increment() {
                
count.value++;
                
}
    
                
function  decrement() {
                
count.value--;
                
}
    
               
 return {
                
count,
                
increment,
                
decrement
                
 };
                
}
            
        
    

Bu örnek, bir sayacın durumunu ve arttırma/azaltma işlevselliğini yöneten bir Composable örneğidir. Bu Composable, başka bir bileşen içinde kullanılabilir ve sayacın durumunu güncellemek için kullanılabilir.

Kullanımı:

    

        

            javascript
        
        

            
                
// MyComponent.vue
                
<template>
                
                  
 <div>
                  
<p>Count: {{ counter.count }}</p>
                  
<button @click="counter.increment">Increment</button>
                  
<button @click="counter.decrement">Decrement</button>
                  
</div>
                
                
</template>
                
                
                    
<script>
                    
import { useCounter } from './useCounter';
                    
export  default {
                    
setup() {
                    
 const counter = useCounter();
                    
return {
                    
counter
                    
};
                    
}
                    
};
                  
                  
</script>
            
        
    

Bu örnekte, useCounter Composable'i, MyComponent adlı bir Vue bileşeni içinde kullanılmaktadır. Bu, sayacın durumunu ve işlevselliğini MyComponent bileşeni içinde kullanmanın kolay ve düzenli bir yolunu sağlar.