Vue / Vuex 状态变化不影响父母答案

【问题标题】：Vue / Vuex state changes not affecting parentsVue / Vuex 状态变化不影响父母
【发布时间】：2020-07-08 20:33:49
【问题描述】：

我在子组件中有一个输入。它的值在那里更改并存储在状态中。父组件将该值用于某些逻辑。当我更改孩子的值时，我认为父母会检测到状态变化。我发现只有当父级本身更新时才会获得更改的数据。

我是 Vue 和状态管理的新手。我认为状态变化会立即反映在使用变量的任何地方，无论是父母还是孩子。我有点认为状态就像一个无处不在的以太，如果映射/导入到一个组件中，它将渗透到一切。

【问题讨论】：

该逻辑是否包含Objects？如果是，那么您可能会陷入 Vue 的反应性陷阱。 Vue 自动无法检测到Objects 的变化，有办法做到这一点。可以加点代码吗？
如果没有看到你的代码是如何设置的，我不能肯定地说，但也许你会从使用watchers 中受益。有一些更改检测警告mentioned in the docs，如果您还没有看到的话。我知道我花了很长时间才发现这个部分在那里。
请添加一些代码。
您所描述的应该可以正常工作，因此问题出在您的代码上。除非您可以提供一些代码，或者更好的是 minimal reproducible example，否则我们无法为您提供帮助。

标签： vue.js state vuex

【解决方案1】：

在 Vuex 存储中更改对象的子对象时，有时 Vue 无法正确显示。当我尝试查看存储对象并且对象的某些子键值发生更改时，我遇到了这个问题。我通过复制整个对象来解决这个问题；

全局声明这个克隆函数，

_cloneObj: function(obj){
   return JSON.parse(JSON.strigify(obj));
}

现在，每当更改存储中的值时都使用此函数，例如

CHANGE_STORE: (state,newValue) =>{
   let obj =  _cloneObj(state.your_object); // this will give you clone of the store obkect
   obj.your_key = newValue; // change the value you want
   state.your_object = obj; // set the value back to store
}

商店会将此视为整个对象的变化，并将反映在任何地方。

【讨论】：