javascript - 使用 VueJS 更新对象中的多个 Prop 时如何引起 react ？

Question

在构建我的应用程序时，我目睹了一些奇怪的行为，其中 dom 的一部分没有对输入做出正确 react 。突变被注册，状态正在改变，但 DOM 中的 prop 没有。我注意到，当我返回时，在 html 中编辑了一个新的空白行，返回时它现在正在显示新的 Prop 。但我必须编辑、保存文档，然后返回以查看状态的任何新更改。
所以状态正在更新，但 Vue 没有对变化使用react。这就是为什么我认为原因:https://v2.vuejs.org/v2/guide/reactivity.html#For-Objects

Vue cannot detect property addition or deletion. Since Vue performs the getter/setter conversion process during instance initialization, a property must be present in the data object in order for Vue to convert it and make it reactive

Sometimes you may want to assign a number of properties to an existing object, for example using Object.assign() or _.extend(). However, new properties added to the object will not trigger changes. In such cases, create a fresh object with properties from both the original object and the mixin object

我状态下的对象是 js-libp2p 的一个实例.定期每当 libp2p instance 做了一些我需要更新我状态中的对象的事情。我是通过执行突变来做到这一点的

syncNode(state, libp2p) {
    state.p2pNode = libp2p
}

在哪里 libp2p是我试图通过更改 state.p2pNode 来让 DOM 使用react的对象的当前实例.我无法使用 $set ，即用于单值编辑，我认为 .assign或 .extend当我试图替换整个对象树时也不起作用。
为什么会有这个限制，是否有解决这个特定问题的方法？

Answer 1

唯一需要重新分配 Vuex state那样的项目是事先声明的。

该项目是对象还是任何其他变量类型都无关紧要，即使覆盖整个值也是如此。这与 set 的 react 性警告情况不同。是必需的，因为 Vue 无法检测到对象属性突变，尽管 state是一个对象。这是不必要的:

Vue.set(state, 'p2pNode', libp2p);

如果有组件正确使用p2pNode，肯定还有其他问题。这对重新分配没有反应。确认您在 Vuex 初始状态下声明/初始化了它:

state: {
  p2pNode: null  // or whatever initialization value makes the most sense
}

这是 demo for proof .问题可能在于您没有以某种 react 方式使用 Vuex 值。