Vuex getter 未更新答案

【问题标题】：Vuex getter not updatingVuex getter 未更新
【发布时间】：2017-04-13 03:17:07
【问题描述】：

我有以下吸气剂：

    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 没有更新。

【问题讨论】：

您如何在laptops 数组中进行更改，您能否包含该代码。
@saurabh 这两种方法我都试过了：state.laptops[index] = laptop; 和 state.laptops[index] = Object.assign({}, laptop);

标签： vue.js vuex

【解决方案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

【讨论】：

state.laptops = [laptop, ...state.laptops]
实际上是这个的忠实粉丝。 [laptop, ...state.laptops] 基本上是 unshift 而 [...state.laptops, laptop] 是 push。
我对用作地图的对象和更改属性有类似的问题。做一个state.map = _.clone(state.map) 对我有用。
这是对这个问题的一个很好的总结：> 如果你不知道这一点，你将浪费数小时的生产力"
“巨型霓虹发光标志”哈哈，太真实了。感谢 SO 的存在。

【解决方案2】：

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

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

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

【讨论】：

一个常见的错误也是状态变量在加载时没有被初始化。它经常发生在我身上。即：在加载 Vuex 时，state.laptops 必须存在于状态中。