导航到组件时使用 Getter 重新计算计算属性答案

【问题标题】：Re-compute Computed Property With Getter When Navigated to a Component导航到组件时使用 Getter 重新计算计算属性
【发布时间】：2017-08-11 11:35:12
【问题描述】：

我将以下组件分配给 url /A:

export default {

  data () {
    return {
      dummyVariableToUpdateDays: true
    }
  },

  created () {
    this.dummyVariableToUpdateDays = !this.dummyVariableToUpdateDays
  },
  computed: {
    days () {
    this.dummyVariableToUpdateDays = !this.dummyVariableToUpdateDays
      return this.$store.getters.getToDoItemsWithinRange.sort(function (a, b) {
        return new Date(b.onlyDate) - new Date(a.onlyDate)
      })
    }
  }
}

days 值在我第一次访问此网址时正确计算。但是，如果我第二次访问url A，它会再次计算，并且计算属性中的getter 函数仍然给出旧值（实际上在另一个组件中更改了）。

【问题讨论】：

您的意思是您的状态在路由更改时发生变化，但您的 getter 仍然提供旧状态？
不，getter 没有问题。在我第二次访问时没有执行 getter（因此是计算方法）。
您能否出于测试目的告诉我有什么变化？是元素的值发生了变化还是数组的长度发生了变化？
@AmreshVenugopal 你是对的！每次我访问 url 时，计算的方法都会执行得很好，但我的 getter 仍然提供旧状态....
好的，那么这是一个什么样的变化？元素的值发生变化，还是添加了新元素？

标签： vue.js vuejs2 vue-component vue-router

【解决方案1】：

您注意到上述行为的原因是因为 vue 不会获取对索引上数组元素所做的更改，这已记录在 here。

当您通过直接设置索引（例如 arr[0] = val）或修改其长度属性来修改数组时。同样，Vue.js 也无法获取这些更改。始终使用 Array 实例方法修改数组，或完全替换它。 Vue 提供了一个方便的方法 arr.$set(index, value)，它只是 arr.splice(index, 1, value) 的语法糖。

如上所述，您可以尝试使用：

arr.$set(index, value)

或

arr.splice(index, 1, value)