在数组中推送对象时，vue ui 没有得到更新答案

【问题标题】：On pushing object in array the vue ui is not getting updated在数组中推送对象时，vue ui 没有得到更新
【发布时间】：2021-05-02 01:55:00
【问题描述】：

我遇到了一个问题，我创建了一个工作正常的自定义拖放组件，

有一个连接到 vuex 存储的数组，我创建了突变来更新或在数组中添加新对象，该数组在删除操作后发生更改，但 ui 没有更改

我正在使用 this.$store.getters['moduleName/functionName'] 获取该数组

mutation.js=>

   export default {
       setNewValue(state, payload){
           state.arr.push(payload);
       }
   }

handleDrop 函数 =>

handleDrop(event, data){
     let actionType = this.$store.getters["moduleName/getActionType"];
     let obj;
     let length = this.$store.getters["moduleName/getLengthOfArr"];
        obj = {
          id: length == 0 ? 1 : length + 1,
          name: data.name,
          isConditional: false,
          ...actionType[data.type],
          yes: [],
          no: [],
        };
        this.$store.commit("moduleName/setNewValue", obj);

action Type 是我需要根据提供的数据类型添加的一些对象

我猜这是由于对象属性的反应性或由于我在 ui 中使用的计算属性

computed : {
     arr(){
         return this.$store.getters['moduleName/getArray'];
     }
}

getters.js

export default {
    getArray(state){
         return state.arr;
    }
}

提前致谢

【问题讨论】：

问题是state.arr 不是一个数组——而是一个对象。当您放下拖动的元素时 - 您应该将其从原始数组中删除（在 Array.splice 的帮助下），然后将其添加到新数组中（使用 Array.push）
实际上 arr 包含复杂的嵌套对象，我想这确实是一个反应性问题，并且计算属性没有得到更新，因为它已被缓存，你说是正确的，你能帮我解决一下吗？例如，如果 arr 为空且已填充？提前感谢@IVOGELOV
对象 inside 的复杂程度无关紧要 state.arr - 重要的是您分配了另一个 object 给它，而不是它需要是复杂嵌套对象的array。拖放意味着您将 item 从一个 array 项目移动到另一个 array 项目。注意区别 - 拖动适用于数组，而不是对象。您拖动的项目可能是一个对象 - 但您不修改项目本身，您修改源和目标 arrays。
兄弟，我正在代理数组中获取拖动的对象，但是在 ui 中，第一个拖动的对象被缓存，如果我重复拖动相同的东西，则休息，即在 ui 中看到缓存的对象，但在存储中我们得到正确的数组
我们如何将代理数组推送一个新对象，我正在谷歌进行一些研究，但我无法得到答案，请帮助

标签： javascript arrays vuex vuejs3

【解决方案1】：

经过一些调试，我解决了这个问题，因为问题在于渲染数据正在更新，甚至商店也在更新

在渲染时，我使用的是之前渲染过的同一个对象，但由于 vuejs 对计算属性的反应性，这让我非常困惑。

【讨论】：