Commit() of undefined in mounted() valina js event function

Hello,

I’m creating a map interface with leaflet and sadly, leaflet doesn’t support framework issues. So I started making a leaflet-draw wrapper by using vanilla js (leaflet.draw, drag, handlers).

My problem is that as to use this wrapper in parent component, I’ve used mounted() hook to mount the draw buttons and functions. Then I started having headache issues.

Please let me know if you need a test project. It’s over 8,000 lines so I will just send you my test project instead of making a jsfiddle.

  1. even vanilla js is it’s in mounted() hook keyword ‘this’ doesn’t work in vanilla js event function
  2. using commit to mutate states, I have to use actions(store.dispatch) to mutate the state which I really don’t understand why I have to use actions in event function to mutate the state.

here’s an simple part of example
import storefrom ‘./store/index.js’

mounted() {
 this.$nextTick(() => {
    ..
   objectLayer.on("layeradd", function(e) {
    this.$store.getters.test // this 'this' won't work
      store.commit('setData', payload) // this store.commit() won't work cuz commit of undefined error
     store.dispatch('updateData') // will only work
    }
  }
}

To Someone might has a similar issue

Fat arrow function makes it work. I couldn’t figure it how & why it works, but… function (e) doesn’t work while e => {} works.

here are some articles you can ref.