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.

[ToddAtkins]

I will preface that I'm not familiar with vue but I do something similar to what you're doing in React...

Are you instantiating your map and map components with esri-loader? Or are you doing it the "regular" way outside of vue? If using esri-loader could you use the bullt-in methods in vue to observe your store updates change then update the def query?

In React, I use the Context API that stores the various bits of data that go into the def query and the user can manipulate this data via some UI. On UI input, it updates the def query and my map component (technically a layer component) sees that update through the native React Context API and and updates the layer's def query as needed.

[ShawnRoberts1 · Accepted solution]

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.

[ToddAtkins]

Yeah I think you're on the right track and to me (as a non vue guy, lol) it looks like your solution is a good one. Glad you got it working.