topic Re: The right way coding in Vue 3 compositive API in ArcGIS JavaScript Maps SDK Questions

The right way coding in Vue 3 compositive API

baohuachu7 — Mon, 27 Jun 2022 06:40:47 GMT

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?

Re: The right way coding in Vue 3 compositive API

ReneRubalcava — Mon, 27 Jun 2022 15:54:56 GMT

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.

Re: The right way coding in Vue 3 compositive API

baohuachu7 — Tue, 28 Jun 2022 03:13:23 GMT

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) .

Re: The right way coding in Vue 3 compositive API

ReneRubalcava — Tue, 28 Jun 2022 13:36:51 GMT

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.

Re: The right way coding in Vue 3 compositive API

baohuachu2 — Wed, 29 Jun 2022 01:30:26 GMT

Hi Rene,

Thank you for your help.