How to use vuex with Konva for onDragEnd option - vue.js

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)
}
})
}