How to use vuex with Konva for onDragEnd option

Question

I am using konva with vuex together.
This is a code at '~.vue' for defining image.
There are two options onDragEnd and onTransform in "const yo".
'this.msg' and 'this.msg2' for the two options is defined in methods.
Thus, I can use the two options on realtime.

/gallery.vue
  .
  .
created() {
  const image = new window.Image();
    image.src = this.imageUpload.url;
    image.onload = () => {
      const yo = {
        image: image,
        name: "yoyo",
        draggable: true,
        scaleX: this.imageUpload.positions.scaleX,
        scaleY: this.imageUpload.positions.scaleY,
        x: this.imageUpload.positions._lastPosX,
        y: this.imageUpload.positions._lastPosY,
        onDragEnd: this.msg,
        onTransform: this.msg2
      };

      this.images.push(yo);
    };
 },

methods: {
    msg(e) {
      this.savePositions(e.target.attrs);
    },
    msg2(e) {
      this.savePositions(e.currentTarget.attrs);
    },

But I want to move the code inside of 'created()' into 'vuex store' to control by one file.
Therefore, I make that in vuex store again like below.
And when I call this actions into 'gallery.vue', everything works well except the two options function as 'this.msg' and 'this.msg2'.
I guessed the problem would happen from 'e' argument. And I edited with various methods.
But that functions doesn;t work saying this.msg and this.msg2 is not function.
How can I call this function correctly?
Thank you so much for your reading.

/store.js
 .
 .
const actions = {
 bringImage({ commit }) {
    axios
      .get(`http://localhost:4000/work`)
      .then(payload => {
        commit('pushWorks', payload);
      })
      .then(() => {
        const image = new window.Image();
        image.src = state.url;
        image.onload = () => {
          // set image only when it is loaded
          const yo = {
            image: image,
            name: state.title,
            draggable: true,
            scaleX: state.positions.scaleX,
            scaleY: state.positions.scaleY,
            x: state.positions._lastPosX,
            y: state.positions._lastPosY,
            onDragEnd: this.msg,
            onTransform: this.msg2
          };

          state.images.push(yo);
        };
      });
  },
  msg({ commit }, e) {
    commit('savePositions', e.target.attrs);
  },
  msg2({ commit }, e) {
    commit('savePositions', e.currentTarget.attrs);
  }
 }

Answer 1

You don't have this in your actions. So try to dispatch your actions with e argument as a payload.

bringImage({
  commit,
  dispatch
}) {
  axios
    .get(`http://localhost:4000/work`)
    .then(payload => {
      commit('pushWorks', payload)
    })
    .then(() => {
      const image = new window.Image()
      image.src = state.url
      image.onload = () => {
        // set image only when it is loaded
        const yo = {
          image: image,
          name: state.title,
          draggable: true,
          scaleX: state.positions.scaleX,
          scaleY: state.positions.scaleY,
          x: state.positions._lastPosX,
          y: state.positions._lastPosY,
          onDragEnd: e => dispatch('msg', e),
          onTransform: e => dispatch('msg2', e),
        }

        state.images.push(yo)
      }
    })
}