
On that, it seems that Vuex can be really useful when trying to extend the functionality of event emitters is this a recommended practice?įor example, I'm creating a simple showcase of UI elements and I have a form. One note though: I'm using Vuex as a substitute for event emitters and since my state values might not always be changing I had to use the vuex subscribe as watchers only respond to changes. I looked at the docs and I am declaring handles so I'm not sure why it's complaining.Īny suggestions on what to try here? Like comment: Like comment: 5 likes Comment button Reply Collapse ExpandĮasy to understand and cater the solution to match my specific situation. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. : Property or method "handles" is not defined on the instance but referenced during render.

I this example the watcher is called but the object doesn't seem to be the user, because there is no user.id.Īlso, the Vuex watcher is never called, but when the beforeDestroy() is called I get an error:
Watch state property 2 how to#
Weird, right? (Not sure how to tell what object I'm getting, but it doesn't have any of the user fields like id or display name.) If I add the immediate flag, it will fire, but then the object I get doesn't seem to be the user object that I'm watching. I tried your suggestion but the watcher never fires. I'm trying to watch a Vuex user object and then do a Vuefire query when it gets populated. Great post, thanks for taking the time to write it.
Watch state property 2 update#
In the example below we need to update a "complex" object otherwise our component will crash: You can watch for a property update and handle it the way you want. Simplest way to achieve our desired solution. One thing I agree in advance is that might sound an awkward situation for most of us but try to abstract the scenario I'm presenting to you and focus on what you can achieve from the features I'm showing here (You might have a completely different scenario where this solution fits a way better than here). My intention here is to show you few possibilities to handle this situation. Imagine you might want to dispatch different actions for each component once this API calls succeed, how can you achieve that while you only dispatch the actions from the components that were rendered in the page?

He wants that some components that are being updated by this status behave differently when the status has changed. The problem he was trying to solve is a bit deeper than this one. Enter fullscreen mode Exit fullscreen modeĬool, now it is working as expected! But I didn't tell you a thing.
