Having some difficulties with updating the global state. I've been attempting to update the state by listening to WebSocket, but it's not updating as expected. Here is how I have defined the global state:
state: {
userData: null
},
getters: {
userData: state => {
return state.userData
},
mutations: {
GET_USER({payload}) {
commit('GET_USER', payload)
},
I am making updates in App.vue like this:
mounted() {
window.Echo.channel("user." + this.userData.id).listen(".user-updated", (user) => {
this.$store.commit('GET_USER', JSON.stringify(user.user))
});
I also tried using localStorage, which seems like a valid alternative, but I prefer using the global state. If I were to use localstorage, it would look like this:
localStorage.setItem('userData', JSON.stringify(user.user))
When I want to display that data in a component, such as Home.vue, the only way I can see what is happening is by including
{{ this.$store.getters.userData }} data() {
return {
data: this.$store.getters.userData,
}
},
It does not update in real time, only when I navigate to another page and return here or manually update the component. Any ideas on how to resolve this?