Vue3 Composition API (Create Reusable Composition Api)

Vuejs kullanırken aynı kod bloğu tekrarlarını mixinler ile çözümleyebiliyorduk vue3 ile beraber mixinlerin yerini alabilecek olan react’da (Custom Hook) olarak adlandıran fonksiyonlar yazabiliyoruz.

Örnek olarak useToggle,useTodoList adında iki adet kanca(hook) fonksiyonumuz olsun.useToggle bir elementi ekranda gösterip göstermeme işlemini yaparken, useTodoList kancamız bize bir listeye eleman ekleme ve çıkarmamızda yardımcı olsun.

Proje Oluşturma

Vue cli ile birlikte

vue create vue3

dedikten sonra Vue3 default seçeneğini seçiyoruz, kurulum tamalandıktan sonra cd vue3 ardından npm run serve diyerek projeyi ayağa kaldırıyoruz.

Context Oluşturma

Proje içerisinde src/context/useToggle.js ve src/context/useTodoList.jsdosyalarını oluşturalım ve aşağıdaki işlemleri gerçekleştirelim.

useToggleShow:

import {ref} from "vue"

function useToggleShow() {
    const show = ref(true);
    const toggleShow = () => {
        show.value = !show.value;
    };
    return {show, toggleShow};
}

export default useToggleShow

vue içerisinden reactive özelliğini kullanmak için ref’i alıp ilk değer olarak true veriyoruz (başlangıç olarak elementi ekranda göstermek için).

Daha sonra toggleShow fonksiyonumuzda show değerini true ise false,false ise true olacak şekilde ayarlayıp geriye state değerimiz(show) ve fonksiyonumuzu (toggleShow) return ediyoruz.

useTodoList:

import {reactive} from "vue"
function useTodoList() {
    const state = reactive({
        list: []
    });
    const addTodo = () => {
        state.list.push(state.list.length + 1)
    }
    const deleteTodo = (id) => {
        state.list = state.list.filter((item) => {
            return item !== id
        })
    }
    return {state, addTodo ,deleteTodo};
}

export default useTodoList

vue içerisinden reactive özelliğini kullanmak için reactive alıp ilk değer olarak boş bir array veriyoruz.

Daha sonra addTodo fonksiyonumuzda state yeni bir eleman ekliyoruz,

deleteTodo fonksiyonumuzda state listemizi filtreleyip ilgili elemanı çıkarıyoruz, son olarak stateimizi,addTodo ve deleteTodo fonksiyonumuzu geriye return ediyoruz.

useToggle kullanmak için src/components/Mesaj.vue adında bir dosya oluşturalım.

<template>
  <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <button @click="toggleShow">{{ show ? "Gizle" : "Göster" }}</button>
</template>

<script>
import useToggleShow from "@/context/useToggle";
export default {
  setup() {
    const {toggleShow, show} = useToggleShow()
    return {
      toggleShow,
      show
    }
  },
  name: "Mesaj"
}
</script>

componentimizde useToggleShow içerisinden return ettiğimiz fonksiyonumuz(toggleShow) ve statetimiz(show) içeriye dahil edip setup içerisinde geriye return edip kullanıyoruz işte bu kadar basit :). Başka bir componentimizde de aynı şeye ihtiyacımız olduğunda izleyeceğimiz adımlar aynı şekilde olacaktır.

useTodoList kullanmak için src/components/TodoList.vue adında bir dosya oluşturalım.

<template>
  <button @click="addTodo">Yeni Ekle</button>
  <ul>
    <li :key="item" v-for="item in state.list">
      {{ item }}
      <button @click="deleteTodo(item)">Sil</button>
    </li>
  </ul>
</template>

<script>
import useTodoList from "@/context/useTodoList";
export default {
  setup() {
    let {state, addTodo, deleteTodo} = useTodoList()
    return {
      state,
      addTodo,
      deleteTodo
    }
  },
  name: "TodoList"
}
</script>

componentimizde useTodoList içerisinden return ettiğimiz fonsliyonlarımız(addTodo,deleteTodo) ve statetimiz(state) içeriye dahil edip setup içerisinde geriye return edip kullanıyoruz.

Herkese İyi Çalışmalar Dilerim. :)