The right way coding in Vue 3 compositive API

[baohuachu7]

To share the Map or MapView object through the application, what's the right way in Vue 3 dev environment?

To use "Provide/Inject" or "Vuex" state management ?   In this thread  it seems the Js SDK not support proxy so the Map objects are not reactive.   What about the current version of SDK? 

[ReneRubalcava]

I don't want to dictate it as the right way, but this is an example of how I manage ArcGIS JSAPI in Vue.

https://github.com/odoe/nearby-app/blob/main/src/store.ts

You can also use shallowRef in components for stuff if you like. This will just wrap the instance in a Proxy and not all of it's props

https://vuejs.org/api/reactivity-advanced.html#shallowref

I very much recommend that ArcGIS JSAPI not be referenced directly in components, but again, that is just my opinion.

[baohuachu7]

Hi Rene:

   What do you mean : ArcGIS JSAPI not be referenced directly in components  ?

   If not use the reactive features for  ArcGIS JSAPI , only those on Vue side use reactive, and use Accessor watch method, or watchUtils     to handle Map or MapView changes.  Is this way OK?  (as discussed in this thread)  . 

[ReneRubalcava]

I prefer to isolate references to the JSAPI in the store or utility modules, but components not to import things like the Map or MapView directly.

[baohuachu2]

Hi  Rene,

Thank you for your help.