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

Modular Vuex "getters" ile "computed" Birlikte Çalışmıyor

kazim.karagul

Merhaba arkadaşlar,

Bir projemde modüler ilerlediğim için Vuex tarafını da modüler yazmaya çalışıyorum. Bu nedenle Notification adında vuex nesnem var. Bu vuex içerisinde notifications dizisine bir eleman eklediğimde eleman diziye sorunsuz ekleniyor ama değişiklik arayüze yansımıyor. Sayfa ilk açıldığında computed içinden vuex verisi alınıyor ama ekleme işleminin ardından computed içinde veri güncellenmiyor. Adım adım kontrol ederek state içindeki verinin güncellendiğini görüyorum. Sorunla ilgili web'de birkaç forumda konu ve git issue açanları gördüm. Önerileri aynen uygulamama rağmen sorun çözülmedi. Önerilerde görüp de yaptıklarımı kod içinde açıklama olarak ekledim. Çözüm önerisine ihtiyacım var. Sizce sorun ne olabilir?

Canlı çalışır örneğini buradan inceleyebilirsiniz.
https://jsfiddle.net/tys6j2na/3/

	<div id="app">
	  <input v-model="notification" />
	  <button @click="addNotification">Ekle</button>
	  <ol>
		<li 
		  v-for="(notification, index) in notifications" 
		  :key="index"
		>{{ notification.text }}</li>
	  </ol>
	  <script src="https://cdn.jsdelivr.net/g/vue@2.0.3,vuex@2.0.0"></script>
	</div>

Vue Kodu

	const Notification = () => {
		return new Vuex.Store({
			state: {
				notifications: [
					{
						id: 1,
						text: 'AAA',
					},
					{
						id: 2,
						text: 'BBB'
					},
					{
						id: 3,
						text: 'CCC'
					},
				],
			},
			mutations: {
				setNotifications(state, notifications) {
					state.notifications = notifications
				  
				},
				addNotification(state, notification) {
						// Bu yönemle diziye ekleme çalışıyor
					state.notifications.push(notification)
						
					// Bu yönemle diziye ekleme çalışıyor
					// state.notifications.unshift(notification)
					
						// Bu yönemle diziye ekleme çalışıyor
					// Vue.set(state.notifications, state.notifications.length, notification);
					
					// Yeni bildirimin eklendiği görünüyor ama bu değişiklik arayüze yansımıyor
									console.log(state.notifications)
				},
			},
			actions: {
				setNotifications(context, notifications) {
					context.commit('setNotifications', notifications)
				},
				addNotification(context, notification) {
					context.commit('addNotification', notification)
				},
			},
			getters: {
				notifications(state) {
					return state.notifications
				},
				totalNotificationsCoun(state) {
					return state.notifications.length
				},
			},
		})
	}

	const store = {
		modules: {
			Notification,
		}
	}

	new Vue({
		store,
		el: '#app',
		data(){
			return {
			notification: ''
		  }
		},
		computed: {
			notifications(){
				// Sayfa ilk açıldığında bu şekilde veriler alınıyor ama diziye yeni eleman eklenince arayüze yansımıyor.
			  return this.$store.modules.Notification().getters.notifications;
			  
			  // Bu yöntem de ilk açılışta çalışıp sonra güncellenmiyor
			  //return this.$store.modules.Notification().state.notifications;
					}
		},
		methods: {
			addNotification(){
			const notification = {
						id: this.notifications.length + 1,
			  text: this.notification
			}
			// Yeni bildirim diziye ekleniyor
			this.$store.modules.Notification().dispatch('addNotification', notification)
			
			// Bu yöntem de çalışıyor
			// this.$store.modules.Notification().commit('addNotification', notification)
		  }
		}
	})

kazim.karagul

Sorunu sonunda çözebildim. Belki başkasının da işine yarar. Hazır çalışır durumda.

store/index.js içeriği:

import Vue from 'vue';
import Vuex from 'vuex';
import createLogger from 'vuex/dist/logger';
import Notification from './Core/Notification.js';

Vue.use(Vuex);

const debug = process.env.NODE_ENV !== 'production';

export default {
    modules: {
        Notification,
    },
    strict: debug,
    plugins: debug? [ createLogger() ] : [],
}

Notification Vuex dosyasını aşağıdaki gibi değiştirin.

import Vuex from 'vuex'
const Notification = new Vuex.Store({
    state: {
        notifications: [],
    },
    mutations: {
        setNotifications(state, notifications) {
            state.notifications = notifications
        },
        addNotification(state, notification) {
            state.notifications.push(notification)
        },
    },
    actions: {
        notificationsCount(){
            return this.$store.modules.Notification.getters.getTotalNotificationsCount;
        },
        setNotifications(context, notifications) {
            context.commit('setNotifications', notifications)
        },
    },
    getters: {
        getNotifications(state) {
            return state.notifications
        },
        getTotalNotificationsCount(state) {
            return state.notifications.length
        },
    },
})
export default Notification

Notifications.vue component içeriği:

<script>
    export default {
        name: "Notifications",
        computed: {
            notifications(){
                return this.$store.modules.Notification.getters.getNotifications;
            }
        },
        mounted() {
            const $this = this;
            const frontend = this.$pusher.subscribe('Frontend')
            frontend.bind('Illuminate\\Notifications\\Events\\BroadcastNotificationCreated', function (notification) {
                $this.$store.modules.Notification.commit('addNotification', notification)
            });
        },
    }
</script>

HTML kısmını da kendinize göre yazmanız lazım.

İşinize yarayacak diğer kaynaklar:

https://gist.github.com/DawidMyslak/2b046cca5959427e8fb5c1da45ef7748
https://github.com/jaggy/vue-pusher
https://medium.com/js-dojo/laravel-passport-pusher-vue-js-27fcec38546b

İşinize yaraması dileğiyle..