Vue computed 属性更改存储状态

Question

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

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

我计算了 computedWarehouses 属性，它在上述可见销售代理或仓库数组更改时运行。

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

现在，当我尝试对 warehouses period 对象内的 salesagents 执行相同操作时，我可以从 computedwarehouses 数组中删除 salesagents，但由于某些原因，它们也会从状态数据中删除，因此取消选中 salesagents 复选框会删除来自 computedwarehouses 数组的 salesagent 但再次选中该复选框无效，因为该 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 始终保持不变，因此当我再次选中某些销售代理复选框时，我会再次看到该代理。

Answer 1

我会自己回答。解决方案是复制并断开与原始数据的所有联系。

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

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

Vue computed 属性更改存储状态

Vue computed property changes store state

vuex

vuejs2

Vue computed 属性 更改存储状态

Vue computed property changes store state

vuex

vuejs2

Vue computed 属性更改存储状态