vue.js - Vuex 观察动态变化值

Question

我有一个像这样动态填充的 vuex 存储

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

我的所有组件都将其表名和列名存储在 props 中，因此在我的组件中，我可以访问 tableName 和 columnName。

现在，componentA(columnName1) 的 onChange 会导致 componentB(columnName3) 的值发生变化，并且 vuex 值也会发生变化。我做了这样的事情来改变 vuex 的值

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

现在，我想要一种方法来检查 vuex 值的变化并在 componentB(columnName3) 输入框中更新它。

我怎样才能实现它？有人可以指导我吗？

Answer 1

如果你想查看存储值，你可以这样做:

在您的组件中:

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