0

我遇到了一个怪癖，我似乎无法理解，不知道这是否是 VueX 的标准行为，或者我是否错误地实现了这一点。

我在分配给新变量的模块化商店上有一个 VueX getter。当我尝试操作新分配的变量时，它也会更新状态 - 我如何才能创建 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-for 中使用 this 的实例中 -列表每次都不断变大。

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

4

2 回答 2

0

如果. $store.getters['filters/getActiveFilters']_ state.filters因此，当您推送某个元素时，您会将其推送到应用程序其他部分引用的缓存过滤数组。只需复制数组slice以避免更改缓存值：

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

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

于 2018-08-07T23:52:27.473 回答
0

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

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

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

于 2018-08-08T02:17:33.943 回答