63

我有以下吸气剂：

    withEarmarks: state => {
        var count = 0;
        for (let l of state.laptops) {
            if (l.earmarks.length > 0) {
                count++;
            }
        }
      return count;
    }

在一个组件中，这个计算属性派生自该 getter：

        withEarmarks() { return this.$store.getters.withEarmarks; },

返回的值是正确的，直到我更改了笔记本电脑数组中的一个元素，然后 getter 没有更新。

4

2 回答 2

129

在你的情况下state.laptops.earmarks是一个数组，你正在通过它的数组索引来操作它state.laptops[index]。Vue 无法对状态数组上的突变做出反应（按索引）。该文档为此提供了 2 个解决方法：

// 1. use purpose built vue method:
Vue.set(state.laptops, index, laptop)
  
// 2. splice the value in at an index:
state.laptops.splice(index, 1, laptop)

尽管已记录在案，但我认为该页面上的巨大霓虹灯发光标志上写着“如果您不知道这一点，您将浪费数小时的生产力”将是一个不错的补充。

您可以在此处阅读有关此“警告”的更多信息：https ://vuejs.org/v2/guide/list.html#Caveats

于 2017-01-25T15:41:02.150 回答
0

除了反应性问题和 Vue 警告之外，可能还有另一个原因，您counter在计算函数中引入了局部变量，您可以尝试使用reduce给定的函数。

withEarmarks: state => {
    return state.laptops.reduce((acc, item) => {
        if(item.earmarks.length > 0){
            acc++;
        }
        return acc;
    }, 0);
}

除了这个答案之外，还要考虑@jpschroeder 的答案。

于 2020-08-18T12:40:04.953 回答