I am working with Konvajs. To give you a little explaining, it’s basically a canvas to draw stuff on and edit, move, delete, etc.
E.g. People can drag ‘n drop a (text)node. The node will be added to a group, which is added to my containerGroup, which is added in my (a) layer. (Example of code below)
For this functionality I’m using Vuex. So, I set my data (which works) to Vuex. And when set, I want to update my layers so my node appears in the list. (which does not work)
When I create a node, I do all functionality for adding node to group, to container, etc. When this all is done i want to commit my layer. I am trying to get my updated state to my component but it does not receive the updates when I add a node to ‘groupA’.
// Commit layer
store.store.commit('node/setLayer', layer)
// Change state
setLayer(state, payload) {
Vue.set(state.layers, state.activeLayer, payload)
}
I searched for a while now and always find the same solutions which does not work for me:
Object.assign() Vue.set()
I know these options are to reassign data so Vue knows there has been a state mutated. But they do not work either. Maybe I am using them wrong. That’s why I want to learn to understand and help me in the future.
If I trigger another mutation, my layer list will update. That makes me think about reactivity not doing his thing, or at least not how I think it should work.
Example of my object:
state: {
layers: {
a: {
groups: {
groupA: {
nodeText1: {
attrs: {
width: 100,
height: 100
}
},
nodeText2: {
attrs: {
width: 100,
height: 100
}
},
...: {}
},
groupB: {
node: {
attrs: {
width: 100,
height: 100
}
}
}
}
},
b: {
groups: {
groupC: {
node: {
attrs: {
width: 100,
height: 100
}
}
}
}
}
}
}
I hope someone can help me out here
Much appreciated in advance.
Answer
I solved my problem by redefining the root instead of replacing the layer its self.
mutations: {
setLayer(state, layer) {
state.layers = {
...state.layers,
layer
}
}
}