Vue.js 导航到组件时使用Getter重新计算计算属性

我已将以下组件分配给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时正确计算。但是，如果我第二次访问

url A

，它将再次被计算，并且computed属性中的getter函数仍然给出旧值（在另一个组件中实际发生了更改）

您之所以注意到上述行为，是因为vue没有拾取对索引上数组元素所做的更改，这是有文档记录的

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

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

arr.$set(index, value)

或

---

---

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

arr.splice(index, 1, value)