Vuex getter未更新

Question

我有以下要点：

    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不更新。

Answer 1

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

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

除了回答这个问题，还要考虑@ JpSurreEd的答案。

Answer 2

在您的情况下，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