You've a computed property called user which comes from your store, right? You don't watch computed properties (vuejs.org/v2/guide/computed.html). The computed property will have a set/get methods that you can customize for our needs. So you know when it changes (set is called).
If you want to watch, you can still do watch the getters.user so whenever the user changes (I'm assuming that is what you want here) this watcher will be called. I've tried to copy from your example the code below and adapt it but please double check the calls.
You watch getters.user so I assume you've some user state that gets committed and a getter that maps to this state
Whenever the getters.user changes (new entry/property - watch out for Vue.set in this case) the watcher is called (where you want to call firestore)
I hope it is what you want (as I don't know in details it gets a bit tricky to fully understand the example). Let me know if I helps or let me know if anything else is needed.
Yes, you're correct. user is in the store and I'm trying to get data from Firestore when user changes. But this.$store.watch never gets invoked. If I console.log it in mounted it's null. But when I console.log it in beforeUpdate it's set. Yet, this.$store.watch is never called.
If I use the normal watcher on user it gets invoked, but the values don't seem to be there. I can log them and they are undefined. Perhaps this is because user is a Vuex computed property. I tried deep: true but then the (non-store) watcher is invoked twice, neither time with the data I need.
Any idea why the watcher isn't being called even through user is obviously changing?
Please check store.js and App.vue. I've tried to create a fetch logic (full user and just username). Please mind the comments and play with comment/uncomment the deep and immediate options.
Also mind the first warning here vuejs.org/v2/api/#vm-watch once you hit the Fetch new username button.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hey Adam, I'm glad that you liked it!
Let me try to help you from your gist.
You've a computed property called
user
which comes from your store, right? You don'twatch
computed properties (vuejs.org/v2/guide/computed.html). The computed property will have a set/get methods that you can customize for our needs. So you know when it changes (set
is called).If you want to watch, you can still do watch the
getters.user
so whenever the user changes (I'm assuming that is what you want here) this watcher will be called. I've tried to copy from your example the code below and adapt it but please double check the calls.What is happening here is:
getters.user
so I assume you've someuser
state that gets committed and a getter that maps to this stategetters.user
changes (new entry/property - watch out forVue.set
in this case) the watcher is called (where you want to call firestore)I hope it is what you want (as I don't know in details it gets a bit tricky to fully understand the example). Let me know if I helps or let me know if anything else is needed.
Yes, you're correct.
user
is in the store and I'm trying to get data from Firestore whenuser
changes. Butthis.$store.watch
never gets invoked. If Iconsole.log
it inmounted
it's null. But when Iconsole.log
it inbeforeUpdate
it's set. Yet,this.$store.watch
is never called.If I use the normal watcher on
user
it gets invoked, but the values don't seem to be there. I can log them and they are undefined. Perhaps this is becauseuser
is a Vuex computed property. I trieddeep: true
but then the (non-store) watcher is invoked twice, neither time with the data I need.Any idea why the watcher isn't being called even through
user
is obviously changing?Thanks for your help!
Hey Adam, to help our discussion I've created this Codesandbox: codesandbox.io/s/agitated-haze-ojdun
Please check
store.js
andApp.vue
. I've tried to create a fetch logic (full user and just username). Please mind the comments and play with comment/uncomment thedeep
andimmediate
options.Also mind the first warning here vuejs.org/v2/api/#vm-watch once you hit the
Fetch new username
button.