CODEWITHSUNDEEP
vue.jsvuex
Rehan
Rehan

Reputation: 4013

Vuex Watch for dynamic change value

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?

Upvotes: 2

Views: 77

Answers (2)

entio
entio

Reputation: 4253

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.

Upvotes: 0

Abdelillah Aissani
Abdelillah Aissani

Reputation: 3108

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
    }
  }

Upvotes: 2

Related Questions