Question

我有以下的getter：

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; },

返回的值是正确的，直到我更改laptops数组中的元素，然后getter不会更新。

Answer 1

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

Answer 2

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

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

除了此答案外，还请考虑@jpschroeder的答案。

Answer 3

我想补充一点，此问题对于Objects也适用。当我们做类似的事情

const level = 1;
myobj[level] = 'some data';

吸气剂未更新。它不会跟踪对象属性的更改。

我做什么

const tmp = { ...myobj };
tmp[level] = 'some data';
myobj = { ...tmp };

Vuex getter没有更新

3 个答案: