VUEX Getter = 数组内的过滤器数组答案

【问题标题】：VUEX Getter = Filter array inside arrayVUEX Getter = 数组内的过滤器数组
【发布时间】：2021-03-22 20:28:10
【问题描述】：

我在 VUEX 中有一个 getter，我正在尝试过滤数组中的一个数组，但不断收到有关修改 getter 中状态的警告。

错误：[vuex] 不在突变处理程序之外改变 vuex 存储状态

我知道我可以在顶级数组上做一个简单的过滤器，但它似乎不适用于 people 数组，我可以让它显示我想要的结果的唯一方法是执行以下操作（错了）

for (const company of company.companies) {
      const filteredPeople: IPerson[] = company.people.filter(
        x => x.jobId === 1
      );
      company.people = filteredPeople;
    }

【问题讨论】：

这可能是因为您要分配company.people = filteredPeople，请尝试在mutation 中执行此操作而不是action。
你能添加你的代码给你一个错误，而不是添加有效但错误的代码吗？
@maxshuty 上面的代码是导致 vuex 错误的原因
return company.companies.map(c => ({...c, people: c.people.filter(p => p.jobId === 1)}))

标签： javascript typescript vue.js vuejs2 vuex

【解决方案1】：

简而言之，您不能修改 getter 内部的状态，因为这很容易导致无限循环。此外，getter 并不意味着永远修改任何类型的外部状态，而只是返回（可能已翻译）状态片段以用于进一步的数据表示。试试这段代码，而不是修改状态，而是返回带有过滤的companies 的翻译副本people：

return company.companies.map(c => ({...c, people: c.people.filter(p => p.jobId === 1)}))

【讨论】：