davydnorris
commented
2 years ago This is not a GMap problem, this is a design problem. Components should be self contained, so there are two ways I would approach this:
- use Vuex state properties to control the map's appearance and then modify these from your other components. Don't put the entire mapObject reference into Vuex, put the individual properties and then link them to props on the map
- emit events from the external component and have your map component listen for them and take appropriate action
What you try to do
Try to operate map by other component
What is the problem
In the same component, we can use $refs[some-map-ref].$mapObject to control the map like panTo(), setOptions() ... Now I want to control that map by another component like navbar's btn, I can't get the $mapObject by refs because there're not in the same component.
What kind of things have you already treated
I commit $refs[some-map-ref].$mapObject to Vuex in mounted hook and share this mapObject to navbar by ...mapGetters. So I can control that map by navbar btn. It works fine but not Vuex strict mode. If strict mode enabled, lots of maximum call stack size exceeded error shows in console.
Someone can give me some hint to access maps by different components gracefully?
Live: https://azusa5526.github.io/map-test/ Or clone & run dev: https://github.com/azusa5526/map-test
Steps to reproduce
1.Create a new vue project with vuetify 2.Add gmap-vue library by npm 3.import GmapVue from 'gmap-vue' in main.js 4.add Vue.use GmapVue... in main.js 5.Copy App.vue, HelloWorld.vue, store/index.vue from my repo: https://github.com/azusa5526/map-test
6.Change store/index.vue 'strict: true / false' flag 7.Open dev sever and see errors
Os
Mobile
N/A
Versions
Package manager
Plugin version