Map tiles mostly disappear on zoom of standard map about vue-mapbox HOT 8 CLOSED

It's not that simple. It's generally bad idea to add to Vuex or component's data anything but primitive types and plain objects. Vue adds getters and setters to every property and it may break Map object (for example if getters/setters already used for some purpose).
If you want to store map object, store it as non-reactive in component or just add to $store object, like so:
in component:

export default {
  // …component code…
  created() {
    this.map = null
  },
  methods: {
   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
   }
  }
}

from vue-mapbox.

In case this will help anyone, this solved my issues with multiple maps in one app, and their broken style:
geoMapLoaded(map) { let self = this; map._isVue = true; self.setEntityGeolocationMap(map); self.getEntityGeolocationMap.resize(); },

Actually setting isVue to true solved this map._isVue = true;

from vue-mapbox.

This issue was solved by not keeping the map object in a vuex store

I tried both options, still same issues if tiles aren't satellite

Ref: #111 (comment)

from vue-mapbox.

Actually setting isVue to true solved this map._isVue = true;

It solved the issue on my side. My component has vuex-mapped properties, although this.map is not. But maybe vuex was messing with it anyway?

edit: actually, as stated in vuejs/vue#2637 (comment)

1. If you need to skip observation for an object/array in data, use Object.freeze() on it;
2. You don't need to put an object in data in order to access it on this. If you simply attach it to this in the created() hook, it doesn't get observed at all.

Declaring the property solely in the created() lifecycle method fixed the glitch.

from vue-mapbox.

I made some progress with this, seems that it's somehow related to vuex. I can use the map normally until I commit the map object to the vuex state. Then everything goes haywire, like in the video above. I've disabled everything that the app does with the map once it's in the state store. I can't for the life of me figure out why just adding the map object to the state store would cause this problem

from vue-mapbox.

Hi,

Thank you, yes, that explains it. I'm using typescript, so I can't just extend the $store in that way, but I created a shared service the store and components can share, and it works great. Closing-

from vue-mapbox.

@chriszrc Can you share a repro link? I'm facing a similar issue.

from vue-mapbox.

from vue-mapbox.