Nuxt 3'te Context Yapısını Kullanmanın Anahtarları

Web uygulama geliştirme sürecinde, uygulamanın farklı katmanları arasında veri ve fonksiyonları etkili bir şekilde paylaşmak büyük önem taşır. Nuxt 3, Vue.js tabanlı modern web uygulamalarında bu ihtiyaca yönelik olarak gelişmiş bir context yapısı sunar. Bu blog yazısında, Nuxt 3'teki context yapısını nasıl kullanabileceğinizi adım adım açıklayacağım.

1. Nuxt 3'te Context Yapısının Temelleri

Nuxt 3'te context, uygulamanın genelinde erişilebilen ve uygulamanın farklı katmanları arasında veri akışını sağlayan bir yapıdır. Bu yapı, uygulamanın server-side ve client-side kısımları arasında köprü görevi görür.

2. Context Yapısını Tanımak

Context yapısı, uygulamanın mevcut durumu ve Nuxt instance'ı hakkında bilgiler içerir. Temel özellikleri arasında app, store, route, params, query ve req/res nesneleri bulunur.

3. Context ile Çalışmak

Context yapısı, genellikle middleware, plugins ve server-side işlemlerde kullanılır. Örneğin, bir middleware içinde context yapısını kullanarak kullanıcı doğrulaması yapabilirsiniz:


export default function ({ store, redirect }) {
if (!store.state.user.isAuthenticated) {
redirect('/login');
}
}

4. İleri Seviye Kullanımlar: Asenkron İşlemler ve API Entegrasyonları

Nuxt 3'teki context yapısını kullanarak, uygulamanızın daha interaktif ve dinamik olmasını sağlayan asenkron işlemleri kolaylıkla gerçekleştirebilirsiniz. Bu, özellikle veri yükleme ve API istekleri gibi durumlarda faydalıdır.

Asenkron Veri Yükleme

Context yapısı, sayfa veya bileşenlerinizde asenkron veri yükleme işlemlerini kolaylaştırır. Örneğin, bir API'den kullanıcı bilgilerini çekmek için şu adımları izleyebilirsiniz:

<script setup>
import { useAsyncData } from 'nuxt/app'

const { data: userData } = useAsyncData('userData', async (context) => {
const response = await context.$http.get('/api/user')
return response.data
})
</script>

Bu örnekte, useAsyncData fonksiyonu, API'den asenkron bir şekilde veri çekmek için kullanılmaktadır. context nesnesi aracılığıyla API isteği yapılır ve dönen veri userData içinde saklanır.

API İstekleri

API istekleri için context yapısını kullanmak, uygulamanızın server ve client tarafları arasında sorunsuz bir veri akışı sağlar. Örneğin, bir oturum açma işlemi gerçekleştirelim:

export default {
async asyncData(context) {
try {
const { data } = await context.$http.post('/api/login', { username: 'user', password: 'pass' })
context.store.commit('setUser', data.user)
} catch (error) {
context.error({ statusCode: 401, message: 'Kullanıcı doğrulanamadı' })
}
}
}

Bu örnekte, kullanıcı adı ve şifre ile oturum açma isteği yapılıyor. Başarılı bir giriş durumunda kullanıcı verisi Vuex store'a kaydediliyor. Bir hata oluşursa, hata yönetimi için context.error kullanılıyor.

Pluginlerde Context Kullanımı

Nuxt 3'te pluginler, uygulamanın genelinde erişilebilen fonksiyonları ve özellikleri tanımlamak için kullanılır. Pluginler içinde context yapısını kullanmak, global bir fonksiyonellik sağlar. Örnek:

// plugins/my-plugin.js
export default ({ app }, inject) => {
inject('myFunction', () => {
console.log('Bu bir global fonksiyondur.')
})
}


Bu örnekte, myFunction adında bir fonksiyon, plugin aracılığıyla global olarak uygulamaya enjekte edilmiştir. Bu fonksiyon, uygulamanın herhangi bir yerinden this.$myFunction() şeklinde çağrılabilir.

Nuxt 3'teki context yapısını kullanarak, uygulamanızın farklı katmanları arasında veri ve fonksiyonları etkin bir şekilde paylaşabilir ve daha dinamik web uygulamaları oluşturabilirsiniz. Bu rehber, context yapısının ileri seviye kullanımlarını detaylandırarak, Nuxt 3'te uygulama geliştirmenin kapılarını aralamaktadır.