I have a NuxtJS app that works with OpenLayers maps. I have a component to handle the map. This component is present on all the pages of my app.
The idea is to not recreate the map object at each page change (the component will be recreated I think, but not the Map Object) but just to reattach the map to the page. If I recreate the OL Map object every time it will reload all tiles and data, and it will be slow and ugly.
- My first try was to embed the map object in the state. It works, but I think the state is not made to handle complex object, only plain js object. plus it broke the VueJS dev tools in the browser :-) (but it works)
- I tried to create a plugin in order to have a global
this.$maporthis$olMapin the context of the app:
import Map from 'ol/Map'
export default ({context, inject}) => {
const map = Map()
inject('map', map)
}
But I had an error "this" is undefined (in the Map object init). In the nuxtjs config, the plugin was registered as client only.
Is there a method to have a global object available in a NuxtJs app? Like a "service" in a backend framework.