Working with Vuex Map

[liamb13]

I know the docs briefly touch on setting the map to Vuex store;

onMapLoaded(event) {
      // in component
      this.map = event.map;
      // or just to store if you want have access from other components
      this.$store.map = event.map;
    }

https://v-mapbox.geospoc.io/guide/basemap.html#map-loading

However, they don't mention how to load a map from the store? I'm assuming this is relatively easier and I'm likely overthinking it.

[joankuah]

Hello, I came across this issue and I'm also interested to know more on how we could use Vuex to store the event.map. Based on the current docs it mentioned storing it to the state:

// or just to store if you want have access from other components
this.$store.map = event.map;

However, as far as I know, the only way to change a store's state is through committing mutations.

Would really appreciate if there are some examples that can be used as a reference or more information regarding this issue could be shown in the docs would be great.

[vinayakkulkarni]

Preferable don't store large objects in store, I usually use the [markRaw()](https: //vuejs.org/api/reactivity-advanced.html#markraw ) to store the map variable locally like this

[joankuah]

Thanks for the advice @vinayakkulkarni. I wrapped my map instance with markRaw() and it worked without making it reactive. Something to take note from the docs, if I need to make it reactive, it will return a proxied version back.

For anyone that had the same issue as me 🤣 I'm using pinia instead of vuex: https://pinia.vuejs.org/core-concepts/plugins.html#adding-new-external-properties