Skip to content

Watch for Vuex State changes!

Vinicius Kiatkoski Neves on January 07, 2019

This is my first post on so I would appreciate any feedback which could help me to improve my overall writing and also things that I might h... [Read Full]
markdown guide

This saved me a tonne! Using it to fetch a user's id from the db (which may not be present at start). The user id is then used to determine which chats to show.

Before this, I kept getting null exceptions. Now I can just check for whether a value exists on change and act accordingly.

Even better, 0 errors now.
Thanks a lot Vin ๐Ÿ‘Œ


Very nicely done. I used your information to automatically populate a Bank Name input field whenever a user enters a valid transit routing number (TR) in another input field. The TR is sent to a validation service on the server, which returns a JSON of the bank found, or an error. I watch for a "valid" routing number and populate the Bank Name from the "name" found in the JSON. If the routing is "invalid" then I ignore it and do nothing to the Bank Name.


Hey Fidel, thank you very much!

Really nice use case, thanks for sharing!

Was it easy to setup or did you find any problems in the way? Did you also find something else I could add to this post as a resource maybe?


IMHO there is a very important thing missing. If you want to watch for a FIELD change in an object or an item change in an array, you need to add deep:true to the watch method and use Vue.set to modify the watched object/array/field.


Hey Roland, thanks for your feedback.

That is true. I will update the article and add it (with links to the original docs about this corner case).

Nevertheless I strongly suggest to use Vue.set whenever possible to avoid pitfalls :)


Do I need to unsubscribe the mutation in the destroyed hook?


Very good question Oscar.

Yes, you do in case your component gets destroyed and the watcher is not needed anymore. You can read about it here:

I will update the examples and the post to add this information. Thanks for asking!

I'm just curious, could you share your use case? I can imagine something like navigating to a new route where the watcher doesn't make sense anymore but can't think about a lot of other use cases =[


Hi Vinicius,

It's just to try to undesrstand the Observable pattern. When you unsubscribe, you cancel Observable executions and release resources. If you don't do it, you'll probably avoid memory leaks. I don't know if Vuex does that for you.

Hey Oscar,

Exactly. Once you subscribe you have to unsubscribe unless your Subject has some kind of check to remove the Observer in case it doesn't exist anymore.
For Vuex you've to do it manually, which means you've to unsubscribe once your component is destroyed.
If you don't do it you might end up in trouble as you mentioned =]

I didn't get if you were asking or not but I'm just confirming hehehe

In case you've any other question, let me know =]


Thank you. I'm monitoring a total count of video cameras in a reactive 'smart' shopping cart. If that number is greater than 4 then vuex queries the db for the model number of our recommended 8-channel NVR. I'm placing that model number in the state.

Now with your solution, I can just watch the state and replace the NVR in the cart with whatever model number is in the state.

Thank you. Thank you. Thank you.


Super cool man! I think it is very unique use case this one!


Nice you liked it!

If you don't mind, could you describe where you've used (or plan to use) this strategy?


Of course. I'm writing a tool for designing formal models, and I needed a way to display warning messages from my components (e.g, after login/registration etc.).


Hmm, the usage of 'mounted' hook to fetch API seems to be contrast from what I have read recently.

Are you sure that is the correct place to put API call?



Sorry for the late reply, I was on vacation for a week and attending a conference this week!

Yeah, I definitely agree that you might use it in the created hook, I use it like that most of the time. Nevertheless regarding the examples shown above it wonโ€™t have an impact in the logic itself. The big difference is if you want to access the DOM or not, or if you have SSR in place as well which can cause some inconsistencies as created hook runs in the server and mounted doesnโ€™t.

Do you think it would add any value updating the examples?



From my previous read, I would love to see we can provide consistent tutorial and samples.
I also use mounted hook to fetch API due to non-SSR requirements. But then I'm working on some Nuxt projects so I need to change my own practice.
If you can update the examples then it'll be perfect. Thank you.

It took a bit longer than what I expected but just updated the repository with the examples. I'm going to update the examples here as well. Thank you again for pointing it out!

It should be all up-to-date now. I've also checked the text itself to update any references to mounted.


Or you could set getter as a function call, example:

isSearch: (state: CustomsState) => () => {
return state.isSearch


Hey @isabolic99 , sorry but I didn't get your point here. Could you add more context?



I have t say, I keep comming back to this article, great job writing this


Thank you very much!

I really appreciate the feedback!

If you have any tips on how to improve it (more examples, use cases, code rewriting...) I would love to hear!


Very helpful, been looking for this for some time now. Thank you very much


Why you use Vue.set(state, 'status', status) instead of just state.status = status?


In this case it is not necessary and I could have use state.status = status, no worries.

But as I'm more concerned with ( I've got used to always write Vue.set to avoid any pitfalls while developing. So it is just a way to keep the codebase concise (in one mutation it is state.prop = prop and in the other is Vue.set...).


I got vuex store undefined when my application redirected from PayPal sandbox. The store got undefined and the auth middleware doesn't apply as expected.

Don't know how to fix this?


Hey Abu,

Could you give some extra input here? I didn't fully get what you mean. Could you maybe share a gist where I can try to understand your situation a bit better?


code of conduct - report abuse