How to make computed setter activated when Leaflet map change view

[sangdth]

I have an app that has Leaflet map in different pages, and customer wants the view must be synced. I tried to make the center of the map and at least the zoom sync but had no luck.

Let's say I have simple leaflet map:

<l-map
    :center="currentCenter"
    :zoom="currentZoom"
    :options="mapOptions"
    :url="url"
/>

In computed, I tried this way:

computed: {
    currentCenter: {
        get() {
            return this.$store.state.currentCenter;
            // try to get currentCenter from vuex store
        },
        set(value) {
            this.$store.commit('updateCenter', value);
            // this setter does not triggered when currentCenter changes.
        }
    }
}

My problem is, it can get correct currentCenter when mounted, but whenever I pane the map around, the Leaflet map change the currentCenter, but the setter inside currentCenter does not triggered, so vuex yelling "Do not mutate vuex store state outside mutation handlers."

So my question is, how could I can make the setter in currentCenter computed get triggered everytime I pane the leaflet map?

Thank you.

Versions

• Leaflet: v1.3.1
• Vue: v2.5.13
• Vue2Leaflet: v1.0.2

[vdcrea]

moveend is the leaflet event triggered after the map changes https://leafletjs.com/reference-1.3.0.html#map-moveend (zoom, or any movement)

In l-map components, you can see it here https://github.com/KoRiGaN/Vue2Leaflet/blob/master/src/components/LMap.vue#L98 returning an event https://github.com/KoRiGaN/Vue2Leaflet/blob/master/src/components/LMap.vue#L116

So you would probably do something like this (didn't test, it s just a hint):

<template>
  <l-map
    :center="currentCenter"
    @update:center="updateCenter"/>
</template>

<script>
export default {
  methods: {
    updateCenter (val) {
      console.log('my new center: ' + val)
      // trigger here your vuex mutations or use it directly in @update:center="vuexMutation"
    }
  }
}
</script>

[DonNicoJs]

Closing due to inactivity

[johallar]

I was having the same problem, and I think you need to be passing a copy of the currentCenter from your store, because vue-leaflet modifies properties of this object directly, rather than re-assigning the center object.

computed: {
    currentCenter: {
        get() {
            return Object.assign({}, this.$store.state.currentCenter);
        },
        ...
    }
   ...
}

Then you can use the event handlers that @vdcrea mentions above to set it.