javascript - 深层嵌套对象中的 react 性不起作用

Question

我正在与 Konvajs 合作。稍微解释一下，它基本上是一个 Canvas ，可以在上面绘制内容并进行编辑、移动、删除等操作。

例如人们可以拖放(文本)节点。该节点将被添加到一个组中，该组被添加到我的 containerGroup 中，该组被添加到我的 (a) 层中。 (下面的代码示例)

我使用 Vuex 来实现此功能。所以，我将我的数据(有效)设置为 Vuex。设置后，我想更新我的层，以便我的节点出现在列表中。 (这是行不通的)

当我创建一个节点时，我会执行将节点添加到组、容器等的所有功能。当这一切都完成后，我想提交我的层。我正在尝试将我的更新状态获取到我的组件，但是当我将节点添加到“groupA”时它没有收到更新。

// Commit layer
store.store.commit('node/setLayer', layer)

// Change state
setLayer(state, payload) {
    Vue.set(state.layers, state.activeLayer, payload)
}

我搜索了一段时间，总是找到对我不起作用的相同解决方案:

Object.assign()

Vue.set()

我知道这些选项是为了重新分配数据，所以 Vue 知道状态发生了变化。但它们也不起作用。也许我用错了。这就是为什么我想在未来学会理解和帮助我。

如果我触发另一个突变，我的层列表将更新。这让我想到 react 性不做他的事情，或者至少不是我认为它应该如何工作。

我的对象示例:

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

            }
        }
    }
}

我希望有人能帮帮我

非常感谢。

Answer 1

我通过重新定义根而不是替换层本身来解决我的问题。

mutations: {
  setLayer(state, layer) {
    state.layers = {
      ...state.layers,
      layer
    }
  }
}