Laravel Türkiye Discord Kanalı Forumda kod paylaşılırken dikkat edilmesi gerekenler!Birlikte proje geliştirmek ister misiniz?

Component mounted() get props data

AbdulkadirLevent

Merhabalar vue 3 kullanıyorum

// userShow.vue
<div class="card">
    <user-bildirimler :user="getUser"/>
 </div>

Bu şekilde <user-bildirimler /> içinden user bilgilerini props ile alıyorum {{ user.name }} burada sorun yok.

Sorun şuki component açılırken store'den bu user'e ait başka veriler çekeceğim ama
ne mounted(), created() nede diğer hooks'larda gelen this.user bilgisine ulaşamıyorum

// userbildirimler.vue

mounted() {
        // Props ile gelen güncel veriyi alamıyor! ancak bir önceki user bilgisini gösteriyor
         console.log('mounted: UserBildirimler.vue propsUser:'+ JSON.stringify(this.user))
        // this.fetchUserBildirimler(this.user)
    },

Sorun ne?
Çözüm ne?

Şimdiden teşekkür ederim.

AbdulkadirLevent

@mgsmus#31054
hocam props var

<script>
export default {
    name: "userBildirimler",
    props: {
        user:  { type: Object, required: true, default: {} },
    },
    mounted() {
       this.fetchUserBildirimler(this.user)
       console.log('mounted: UserBildirimler.vue propsUser:'+ JSON.stringify(this.user))
    },
}
</script>

mgsmus

AbdulkadirLevent Ben soruyu yanlış anlamışım, o yüzden yazdıklarımı sildim.

AbdulkadirLevent

mgsmus Yinede teşekkür ederim.
son bir haftadır o kadar keyifli gidiyorduki 😃 gelip takıldığım noktaya bak!

mgsmus

AbdulkadirLevent Normalde reactive olduğu için userShow.vue içinde getUser değişince userbildirimler.vue içinde de değişir ama userShow.vue içindeki getUser reactive olması lazım, yani getUser ComputedRef olmalı. getUser computed kullanarak mı alıyorsunuz?

AbdulkadirLevent

mgsmus
hocam computed kullanmadım
watch işimi gördü ama doğrusu bumu? bilemedim.
Teşekkür ederim.

props: {
    user:  {type: Object, required: true,default: {} }
},
watch: {
   user() {
       this.fetchUserBildirimler(this.user)
   }
},

mgsmus

AbdulkadirLevent Bu yaptığınız doğru. Zaten sizin sorununuz user özelliği ile değil fetchUserBildirimler yöntemi ile ilgiliymiş. Aslında user değişiyordur ama fetchUserBildirimler tekrar çalışmadığı için eski veri geliyordur, watch burada uygun kullanım.

composition api ile yapılmak istenirse:

props: {
    user:  {type: Object, required: true, default: {}}
},
setup(props) {
    watch(() => props.user, (curr, prev) => {
        fetchUserBildirimler(curr)
    })

    function fetchUserBildirimler(user) {
        // ...
    }
}

AbdulkadirLevent

mgsmus
Hocam ben fetchUserBildirimleri'ne mapActions'tan erişiyorum.
composition api'yi sıkça görüyorum ama hiç bulaşmadım. yavaştan giriş yapsam iyi olacak sanki.
Teşekkürler...

methods: {
    ...mapActions('userBildirimler', ['fetchUserBildirimler', 'storeUserBildirim', 'removeUserBildirim']),
   }
computed: {
   ...mapGetters('userBildirimler', ['getUserBildirimler', 'loading']),
},

trueWD

AbdulkadirLevent composition api harika bir teknoloji bunu geçiş yaptıktan sonra anlıyorsun karmaşık sistemlerde option api den composition api ye geçince fark bariz belli oluyor. 🙂