Question

我遇到了一个奇怪的问题，我似乎无法全神贯注，也不知道这是否是VueX的标准行为，还是我执行不正确。

我在要分配给新变量的模块化存储上有一个VueX getter。当我尝试操纵新分配的变量时，它还会更新状态-如何只创建吸气剂结果的非反应性重复项？

这是我的VueX代码：

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

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

<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-列表每次都会不断变大。

关于如何解决的任何想法？

Answer 1

如果$store.getters['filters/getActiveFilters']中没有任何变化，则吸气剂state.filters将返回相同的（缓存的）结果（对数组的引用）。因此，当您推送某些元素时，会将其推送到应用程序其他部分中引用的缓存筛选数组。只需复制带有slice的数组即可避免更改缓存的值：

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

P.S。这只是浅表副本，因此，如果要更改某些项目属性，请使用突变。

Answer 2

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

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

此方法创建数组副本，并且此副本不与vuex对象关联。要保存更改的值，必须使用突变。真幸运。

VueX Getter反应式-如何为变量分配非反应式？

2 个答案: