Vue.js Global Properties

Uygulama geliştirirken sıklıkla belirli özelliklerin uygulama boyunca yeniden kullanılması gerekebilir. Bu değişkenlerin bildirilmesi, bunların bir kez değiştirilip ardından uygulamanın farklı bölümlerinde tutarlı bir şekilde kullanılmasını sağlar.

Vue.js, bu global özellikleri bildirmek ve ardından uygulama boyunca yeniden kullanmak için pratik yöntemler sunar. Bu makalede, bu global özellikleri nasıl ekleyip kullanacağımıza bakacağız.

Global Properties Nasıl Eklenir

Tanımlayacağız global properties’ler için ileride componentler içerisinde tanımladıklarımız ile bir isim çakışmasını önlemek için dolar işareti veya seçilen bir sembol tanımlamanın önüne eklenmesi tavsiye edilir.Bu işlemi yaptıktan sonra.

Uygulamanızın ana giriş dosyasında, genellikle main.ts veya main.js dosyasında, aşağıdaki kodu eklemeniz gerekmektedir. app.config.globalProperties den yararlanacağız.

app.config.globalProperties​

Uygulama içindeki herhangi bir bileşen örneğinden(components) erişilebilen global özellikleri kaydetmek için kullanmamızı sağlayan bir nesne.(Vuejs Doc.)

app.config.globalProperties.$AppName = 'TestApp'

Yukarıdaki örnekte, AppName uygulama örneğimizde kullanılabilir hale gelir ve uygulamamızın herhangi bir bölümünden erişmemize olanak tanır.

Global Properties’e Erişim

Bileşen dosyanızda, getCurrentInstance() API’sini ve ismini kullanarak global değişkene erişebilirsiniz. Aşağıdaki kodda global özelliğimize nasıl eriştiğimize göz atalım.

<script setup>
// Import getCurrentInstance
import { getCurrentInstance } from "vue";

// use getCurrentInstance
const { proxy } = getCurrentInstance();

console.log(proxy.$AppName) //TestApp
</script>

Yukarıda görüldüğü üzer getCurrentInstance kullanarak proxy oluşturduk. Daha sonra bu proxy ile oluşturduğumuz `global properties``e erişmiş olduk.

Referans

• **app.config.globalProperties**
• **Augmenting Global Properties**

Bu yazımda anlatacaklarım bu kadardı. Umarım yararlı olmuştur ve hoşunuza gitmiştir yeni yazılarımda görüşmek üzere…