JS API/Vue watch for data store changes

ShawnRoberts1

What is the best way to have the map watch for changes a data store. (on change do something inside the map). 

I have a map as a component which I'd like to bind its definition query to something set in the store. I'm doing it this way as the users interact with a side panel (which IS NOT in the map), so I'm having it update a value in the store via mutations. From there I'd like the map to watch for changes to that value and simply update a layers definition query.

I can access the data store perfectly fine from within the map this.$store.state.DefinitionQuery gives me the value I want. But when I try to set the watchUtils watch that value is fires multiple promise and other errors.

I'm not committed to this data structure so if anyone has a better way to have the map respond to changes in other components (**not a widget in the map***) I'm open to the ideas as well. 

I've attached an example of the map component I've got so far. Right now I'm just trying to make it log on a change, but once I figure out the onChange event I'll bind the pointLayer.definitionQuery to it.

Capture.PNG

DMA.JPG

Screenshot 2026-03-04 132733.png

ShawnRoberts1

Hi Todd, thanks for the reply. I assumed the concept would be close enough between Vue/React that just the general idea of the "how" would be enough for me to figure it out. 

I'm using the esri-loader for my map components, just seemed like the easiest way to do it. 

I semi-figured out a solution for now, by just using Vue's built in store watcher within the map JS, then using its on change events to update the data I need updated. Not sure if it's the most elegant solution but it'll work for now.

-----------------------------------------------------------------------------------------

      this.$store.watch(() => this.$store.state.DefinitionExpression, (newExpression) => {

        pointLayer.definitionExpression = newExpression;

        polygonLayer.definitionExpression = newExpression;

      })

---------------------------------------------------------------------------------------

I'm certainty going to dig into finding something similar to a React Context in Vue that seems like a better way.

Thanks.