How can I watch synchronously a state change in vuex?

Question

I am using an opensource vuejs + vuex project and this is the source https://github.com/misterGF/CoPilot/tree/master/src/components

I am currently having problems knowing how to trigger an event from one components to another.

I can use this.$state.store.commit("foo", "bar") to store information in vuex, but when two seperate have two difference export default {} I don't know how I can make the app aware whenever "foo" is for exampled changed to "baz" ... unless I refresh/reload the app, there is no way for me to know the changes

tony19 · Accepted Answer · 2022-07-15 19:47:20Z

Use this.$store.watch on your component. Created() is a good place to put it. You pass it the state to watch and then specify the callback for when it changes. The Vuex docs do not give good examples. Find more information on this Vuejs Forum page. Store watch functions the same as the vm.$watch, so you can read more about that here in the Vue docs.

this.$store.watch( (state)=>{ return this.$store.state.VALUE_TO_WATCH // could also put a Getter here }, (newValue, oldValue)=>{ //something changed do something console.log(oldValue) console.log(newValue) }, //Optional Deep if you need it { deep:true } )

Sorry for the delay. I thought I had accepted the answer. Anyway, I just came to ask one more thing, I hope that's okay. How do I return two things if I am watching more than one state at the same time? Your example shows one return with .VALUE_TO_WATCH but my state has more than one value. I could return the whole state, but there are large contents stored in it. So, I was hoping to find a solution on how to return just one more
@hidar Could you use two watchers? Or you could create a getter that is based on the two values and watch the getter.

xsorifc28 · Accepted Answer · 2021-02-14 03:47:39Z

Your question is not entirely clear so I am going to make some assumptions here.

If you simply want your app to know when a store value has changed you can use a watcher to watch a computed property that is directly linked to a store getter:

So you would set a watcher on something like this:

computed: { doneTodosCount () { return this.$store.getters.doneTodosCount } }, watch:{ doneTodosCount(value) { console.log(`My store value for 'doneTodosCount' changed to ${value}`); } }

If you want your commit to behave differently depending on what the current value of your foo property is set to, then you can simply check for this in your commit function.

Let me know if you have some more questions.

I think the problem is that the computed and the watch properties are not located in the same .vue files. I think this might work if they were in the same file
Obviously you have to watch a computed property that is in the same file. Indirectly you can watch a store property with my given example though so you can easily overcome this limitation and be notified of changes from another component though. Perhaps you have a clear example of what you are trying to achieve.
Also the watch could look like: watch:{ doneTodosCount(newValue, oldValue) { console.log('oldValue', oldValue, 'newValue', newValue ); } }

Collectives™ on Stack Overflow

How can I watch synchronously a state change in vuex?

2 Answers 2

2 Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Linked

Related