VueX Getter 反应性行为 - 如何将非反应性分配给变量？答案

【问题标题】：VueX Getter acting reactively - how to assign non-reactive to variable?VueX Getter 反应性行为 - 如何将非反应性分配给变量？
【发布时间】：2019-01-15 02:02:07
【问题描述】：

我遇到了一个怪癖，我似乎无法理解，不知道这是否是 VueX 的标准行为，或者我是否执行不正确。

我在模块化存储中有一个 VueX getter，我将其分配给一个新变量。当我尝试操作新分配的变量时，它也会更新状态 - 我如何才能创建 getter 结果的非反应性副本？

这是我的 VueX 代码：

export const getters = {
  getActiveFilters: (state) => {
    return state.filters.filter(filter => {
       return filter.status === 'active';
    });
  },
};

然后我有一个在动态类比较器中使用该函数的方法 - 本质上，它通过添加新过滤器返回关于项目列表是否为空的真或假。

<ul>
  <li
    v-for="filter in $store.getters['filters/getActiveFilters']"
    :key="filter.id"
    :class="{disabled: !isSelectable(filter.name, filter.value)}"
  >{{ filter.name }}</li>
</ul>

这是在返回布尔值之前进行一些计算/操作的方法：

isSelectable(name, value) {
  const activeFilters = this.$store.getters['filters/getActiveFilters'];

  /* Here's the part that is screwing up and manipulating the getter result */
  activeFilters.push({name, value, id: 'test-id'});

  let valid = false
  this.activeFilters.forEach(filter => {
   // valid = true;
  });
  return valid;
},

console.log(this.$store.getters['filters/getActiveFilters']) 将返回添加了新值的结果，即使它被添加到不同的变量 - 所以在 v 中使用 this 的实例中-for - 列表每次都在不断变大。

知道如何解决吗？

【问题讨论】：

标签： vue.js vuex vuex-modules

【解决方案1】：

如果state.filters 没有变化，getter $store.getters['filters/getActiveFilters'] 将返回相同的（缓存的）结果（对数组的引用）。因此，当您推送某些元素时，您会将其推送到应用程序其他部分引用的缓存过滤数组。只需使用slice 复制数组以避免更改缓存值：

const activeFilters = this.$store.getters['filters/getActiveFilters'].slice();

附：这只是浅拷贝，所以如果你想更改某些项目属性 - 使用突变。

【讨论】：

【解决方案2】：

您可以使用这种方法解决问题：

const activeFilters = [...this.$store.getters['filters/getActiveFilters']]

此方法创建数组的副本，此副本与 vuex 对象无关。要保存更改的值，您必须使用突变。祝你好运。

【讨论】：