Vuex Watch for dynamic change value

Question

I have a vuex store which is dynamically populated like so

state: { collector: { tableName: { columnName1 : 2, columnName2 : 'NO', columnName3 : '2019-03-23' ... ... } } }

All my component store it's table name && columnName in props, so In my component I have access to tableName and columnName.

Now, onChange of componentA(columnName1) the value of componentB(columnName3) changes and the vuex value gets changed. I do something like this to change the value of vuex

this.$store.commit('setCollector', { tableName : currTableName , value : currValue , columnName : currColumnName});

Now, I want a way to check for the change of vuex value and update it in the componentB(columnName3) input box.

How can I achieve it? Can someone guide me?

Abdelillah Aissani · Accepted Answer · 2019-07-29 18:15:21Z

if you want to watch a store value you can do it like this :

in your component :

computed: { columnName1() { return this.$store.state.collector.tableName.columnName1; } }, watch: { columnName1() { // do something when the value columnName1 changes } }

entio · Accepted Answer · 2019-07-29 21:58:46Z

You can use vuex watchers: https://vuex.vuejs.org/api/#watch

But in general, you should be able to design your data flow in such ways that allows you calling these recalculations manually. Watchers and similar mechanisms can easily led to issues, f.e. with infinite loops, or inconsistent data.

Collectives™ on Stack Overflow

Vuex Watch for dynamic change value

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related