Reactivity in deep nested objects not working

Question

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.

user_10488247 · 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
    }
  }
}

Reactivity in deep nested objects not working

1 Answers