Vuex watch all object subproperties

Question

I am watching a Vuex object's individual properties like so:

this.$store.watch( function(state) {return state.views.height}, function() { //do something } )
this.$store.watch( function(state) {return state.views.width}, function() { //do something } )

Is it possible to watch all of the object properties of state.views without specifying the individual properties?

Answer 1

Vuex's watch method takes the same options argument from Vue's $watch method. There's a deep option that allows you to watch all changes to subproperties.

store.watch(
  state => state.views,
  views => console.log('change', views.height, views.width),
  { deep: true } // <-- options
)

demo