Neler yeni

Soru Sor ?

Sorular sorun ve topluluğumuzdan tanıtlar alın.

Yanıtlar Ver

Soruları yanıtlayın ve Vue.js uzmanı olun.

Uzman Kadro

Ücretsiz olarak sorularınız yanıtlanacaktır.

Vuex nasıl kullanılır?

oldner

Kurucu
Yönetici
Kafası Karışık
Katılım
20 Ara 2020
Mesajlar
41
Tepkime puanı
1
Puanları
8
Yaş
24
Konum
Yalova
Web sitesi
www.vuejstr.com
Derin bir Vuex öğretisinin aksine temel düzeyde Vuex kullanmaya nasıl başlarım sorusunun cevabı niteliğinde bir kısa rehber olacaktır. Başlamadan önce lütfen projenizi kurun ve kurulu olduğu dizine gelin.

İlk adım, Vuex'i kurmak.

Kod:
npm install vuex
Tüm Vuex mantığını ayrı bir dosyada tutmak daha iyidir. Mantığımızı store.js adlı bir dosyada tutacağız. Tabii ki, istediğiniz herhangi bir ad verebilirsiniz. Mağaza nesnemizi bu dosyada tutacağız ve daha sonra onu global Vue örneğiyle kaydettireceğimiz main.js'ye aktaracağız.




Store.js dosyamızda Vuex mağazamız olan bir mağaza nesnemiz var. Mağazamızda daha sonra değiştirilecek veya başka bileşenler tarafından değiştirilecek ve geri alınacak bazı verilere ihtiyacımız var. Önceden tanımlanmış anahtar kelime durumunu kullanarak mağazamıza veri ekleyebiliriz. Bunu normal Vue örneklerinde data () kullandığımız için kullanabiliriz. Mağazamızda zaten bir sayaç (counter) veri özelliğimiz var. Şimdi onu bir bileşenden almamız gerekiyor. App.vue bileşenimizden sayacı alalım. Bunu
Kod:
 $ Store.state.counter
komutunu kullanarak yapabiliriz. Burada, Vuex Mağazamızı main.js dosyasına kaydettiğimizden beri, $store anahtar kelimesi artik bizim için kullanılabilir durumdadır.


Şimdi, verileri alırken çokça kullanacağınız başka bir kavram var. Veriler üzerinde çalışmanız veya kullanmadan önce bazı matematik işlemleri yapmanız gereken durumlar olabilir. Bu çalışma farklı bileşenler için farklıysa, her bir bileşen için ayrı ayrı uygulamaktan başka seçenek yoktur. Ancak işlem tüm bileşenler için aynıysa, getters 'ı kullanabilirsiniz. Getters kullanarak verilerimiz üzerinde işlemler gerçekleştirebilir ve ardından nihai sonucu alabiliriz. Verimiz, alıcıya Vuex tarafından otomatik olarak iletilir. Sayaç verileri özelliğimizi, bir düğmenin kaç kez tıklandığını takip etmek için kullandık ve sonra geri getirdik. Peki, görüntülemeden önce tıklama sayısını ikiye katlamaya ne dersiniz? Bu sonuca ulaşmak için bir alıcı kullanabiliriz.



Alıcımızı yarattık. Bunu App.vue bileşenimizde kullanalım. Alıcımızı kullanmamız gerektiğini unutmayın, böylece bunu kullanamayız. $ Store.state. Alıcılar için bunu. $ Store.getters kullanıyoruz.


Yalnızca alıcının adını kullanmayı unutmayın. Örneğimizde bu, doubleClicks () değil, doubleClick kullanmak anlamına gelir. Bunun nedeni, normal bir işlev gibi görünse bile çalıştırmaya gerek olmamasıdır. Bir olay dinleyicisine bir geri arama işlevi eklerken olduğu gibi düşünün. Geri aramanın otomatik olarak nasıl çağrılacağı gibi, alıcılar otomatik olarak Vuex tarafından çağrılır ve çalıştırılır.

Son olarak mutations 'ları (mutasyon) göreceğiz. Bir veri özelliğinin durumunu değiştirirken, yalnızca bu mutasyonu gerçekleştirirsiniz. Data özelliğinde yapılacak değişiklikler mutasyonda belirtilir. Durum daha sonra herhangi bir bileşenden değiştirilebilir ve yine aynı şekilde güncellenebilir.

Sayaç veri özelliğimizi manuel olarak artırarak değiştiririz. Bunun yerine onun için bir mutasyon oluşturalım. mutasyonların, onu mutasyona uğratmak için durum nesnesine de erişmesi gerekir.


Mutasyonları kullanmak söz konusu olduğunda biraz farklıdır. Alıcılardan ve durumdan farklı olarak, mutasyonlara bu şekilde erişilmez. {CODE]$store.mutations[/CODE] . Bunun yerine, daha önce belirtildiği gibi, bir mutasyon yapılır ve mutasyonun adını parantez içinde belirtiriz.


Burada, Vuex'e artış adı verilen mutasyonu işlemesini veya başka bir deyişle artış adı verilen mutasyonu gerçekleştirmesini söyleriz.
 
Üst