0Pricing
Vue Academy · Ders

defineStore: Durum, Getters ve Actions

Options store ve Setup store, işlev olarak tanımlanan durum, computed getter'lar ve asenkron action'lar.

defineStore: Durum, Getters ve Actions, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Bir Store'un Üç Temel Unsuru

Bir seçenek store'u üç bölümden oluşur: durum (veriler), erişimciler (türetilmiş değerler) ve eylemler (durumu değiştiren yöntemler). Bu üçünü de defineStore içinde tanımlarsınız.

Store Tanımlama

defineStore, benzersiz bir id dizesi ve seçenekler nesnesi alır. Birleştirilebilir bir işlev döndürür; bu işlev kurala göre useXxxStore olarak adlandırılır.

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  // state, getters, actions go here
})

Durum Bir İşlevdir

state seçeneği, bir nesne döndüren işlev olmalıdır. Bu, tıpkı bileşenlerdeki data() gibi, her store örneğinin yeni bir durum almasını garanti eder.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0, name: 'Coddy' })
})

Durumu Okuma

Bir örnek elde etmek için store birleştirilebilir işlevini setup içinde çağırın, ardından durum özelliklerini doğrudan okuyun. Bunlar reaktiftir.

const counter = useCounterStore()
console.log(counter.count) // 0

Erişimciler Hesaplanmış Değerlerdir

getters, computed özellikleri gibidir. Her biri ilk bağımsız değişken olarak state değerini alır ve türetilmiş bir değer döndürür. Sonuçları önbelleğe alınır.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 2 }),
  getters: {
    doubled: (s) => s.count * 2
  }
})

Bir Erişimciyi Kullanma

Bir erişimciye özellik gibi erişin; parantez kullanmayın. Pinia, onu yalnızca bağımlılıkları değiştiğinde yeniden hesaplar.

const counter = useCounterStore()
console.log(counter.doubled) // 4

Erişimcilerin Diğer Erişimcilere Başvurması

Başka bir erişimciyi kullanmak için durum parametresi yerine this kullanın. this kullandığınızda ok işlevi kullanmayın.

getters: {
  doubled: (s) => s.count * 2,
  quadrupled() {
    return this.doubled * 2
  }
}

Eylemler Durumu Değiştirir

actions, yöntemlerdir. Durumu doğrudan okumak ve değiştirmek için this kullanırlar. Commit yok, dispatch yok; yalnızca yöntemi çağırın.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ },
    addBy(amount) { this.count += amount }
  }
})

Eşzamansız Eylemler

Eylemler async olabilir. API çağrılarının yeri burasıdır: verileri alın, ardından sonucu duruma atayın.

actions: {
  async loadUser(id) {
    const res = await fetch('/api/users/' + id)
    this.user = await res.json()
  }
}

Bir Bileşende Store Kullanma

Birleştirilebilir işlevi içe aktarın, <script setup> içinde çağırın ve şablonda durum, erişimciler ve eylemleri kullanın.

<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script>

<template>
  <p>{{ counter.count }} -> {{ counter.doubled }}</p>
  <button @click="counter.increment()">+</button>
</template>

Birden Çok Alanı Güncelleme

Birden fazla durum alanını aynı anda değiştirmek için $patch kullanın. Değişiklikleri tek bir geliştirici araçları girdisinde gruplandırır.

counter.$patch({ count: 10, name: 'New' })

Hızlı Kontrol

Seçenek store'u yapısı hakkındaki bilginizi kontrol edin.

Özet

Bir seçenek store'u üç bölümden oluşur:

  • state: veri nesnesini döndüren bir işlev.
  • getters: önbelleğe alınan türetilmiş değerler; durumu alır veya this'i kullanır.
  • actions: durumu this aracılığıyla doğrudan değiştiren yöntemler.

Store'u setup içinde birleştirilebilir işlevini çağırarak kullanın.

Sıkça Sorulan Sorular

“defineStore: Durum, Getters ve Actions” dersi ücretsiz mi?

Evet — “defineStore: Durum, Getters ve Actions” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“defineStore: Durum, Getters ve Actions” dersinde ne öğreneceğim?

Options store ve Setup store, işlev olarak tanımlanan durum, computed getter'lar ve asenkron action'lar. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“defineStore: Durum, Getters ve Actions” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Pinia ve Vuex: Geçişin Nedeni
  2. defineStore: Durum, Getters ve Actions
  3. Store'ları Birleştirme ve Store'lar Arası Erişim
  4. Pinia Kalıcılığı ve DevTools
← Vue Academy Sayfasına Dön