Vue 计算属性改变存储状态

Posted 2023-02-16

【中文标题】Vue 计算属性改变存储状态

【英文标题】：Vue computed property changes store state

【发布时间】：2021-12-16 22:17:11

【问题描述】：

我正在尝试构建一个简单的过滤器，用于对 Vue 中的数组进行排序。我有状态数据，由 api 调用更新，该调用仅在加载页面时触发。 数据结构是仓库列表，每个仓库都有id和其他属性，周期对象，周期对象里面有salesagents对象数组，每个salesagents都有id。

然后在组件中有一个仓库 ID 数组和销售代理 ID 数组。我通过单击仓库或销售代理是否可见的复选框来更改这些数组的内容。

我有 computedWarehouses 计算属性，当上述可见的 salesagents 或 warehouses 数组更改时运行。

仓库部分工作正常，当我取消选中仓库的复选框时，仓库会从 computedWarehouses 数组中删除，但仓库仍处于 state.data 中。 当我再次单击复选框时，仓库再次插入到 computedWarehouses 数组中，一切都很好。

现在，当我尝试对仓库期间对象内的销售代理执行相同操作时，我可以从计算仓库数组中删除销售代理，但由于某种原因，它们也会从状态数据中删除，因此取消选中销售代理复选框会删除销售代理来自 computedwarehouses 数组，但再次选中该复选框无效，因为该 salesagent 不再在数据中。

我通过 getter 从状态获取的数据。

computedWarehouses() 属性代码：

computedWarehouses() 
      let computedWarehouses = [];
      let intWarehousesFilter = this.warehousesFilter.map( (id) => 
        return parseInt(id);
      );

      for (let warehouse in this.data) 
        if (intWarehousesFilter.includes(this.data[warehouse].id)) 
          computedWarehouses.push(this.data[warehouse]);
        
      

      let intConsultantsFilter = this.consultantsFilter.map( (id) => 
        return parseInt(id);
      );
      
      for (let warehouse in computedWarehouses) 
        for (let workday in computedWarehouses[warehouse].period.workdaysObjects) 
          let computedSalesAgents = [];
          for (let salesAgent in computedWarehouses[warehouse].period.workdaysObjects[workday].salesAgents) 
            let salesAgentObject = computedWarehouses[warehouse].period.workdaysObjects[workday].salesAgents[salesAgent];
            if (intConsultantsFilter.includes(parseInt(salesAgentObject.id))) 
              computedSalesAgents.push(salesAgentObject);
            
          
          computedWarehouses[warehouse].period.workdaysObjects[workday].salesAgents = computedSalesAgents;
        
      

      return computedWarehouses;
,

我做错了什么？我不想更改状态，我希望 state.data 始终保持不变，所以当我再次检查一些 salesagents 复选框时，我会再次看到代理。

【参考方案1】：

我会自己回答。 解决方案是制作一个副本并打破与原始数据的所有联系。

const tempWarehouses = JSON.parse(JSON.stringify(this.data));

我添加了这一行并在 tempWarehouses 上完成了所有操作，因此 this.data 保持不变。