Vuex getter 不会更新

Posted 2023-02-22

【中文标题】Vuex getter 不会更新

【英文标题】：Vuex getter will not update

【发布时间】：2017-12-24 11:24:00

【问题描述】：

我正在使用日期选择器来设置 moment.js 日期，该日期正在我的 Vuex 商店中设置：

存储状态：

const state = 
    arrival: '',
    departure: ''

吸气剂：

const getters = 
    arrival: state => state.arrival,
    departure: state => state.departure,

    prettyArrival: (state) => 
        if (state.arrival instanceof moment) 
            return state.arrival.format(state.prettyFormat);
        

        return '';
    

我的 vuex 商店正在正确更新到达状态（这是一个 moment.js 对象），因为我可以清楚地看到显示更新和原始状态更改的开发工具。

但 prettyArrival 没有正确更新。仅当到达从空字符串变为moment.js 对象时才设置一次。

我的到达 getter 在 devtools 中显示如下：

arrival:"2017-07-21T09:15:53.770Z"

当我记录它时，我得到了 moment.js 对象，虽然它似乎包含 reactiveGetters 和 reactiveSetters，所以反应似乎就位。

是我设置 getter 的方式有问题还是这里有其他问题？

欢迎任何提示，如果您需要更多信息，请告诉我。

【问题讨论】：

prettyArival is not updating at all (..) it is only being set once 是什么意思。那么它正在更新吗？在此方法和 if 语句中调试（或至少放置日志语句）。在数据中，您说默认值为空字符串，但随后您传递了 moment 对象 - 我似乎不正确，但这可能是一个小问题。

@AndreyPopov 在 getter 中使用 consolg.log 时，它似乎只第一次调用了 prettyArrival getter，然后它再次抓住调用它。我猜它与缓存有关：a getter's result is cached based on its dependencies, and will only re-evaluate when some of its dependencies have changed. 但我不知道这是如何在内部工作的。

尝试将默认值改为。还要为这个 getter 添加计算属性 - 它可能会强制它重新计算 ;)

您的代码与这个工作示例有何不同？ jsfiddle.net/hk9oy0br/1

【参考方案1】：

解决方案在于这个答案：

Why does vue.js not update the dom with datepicker using moment.js

我认为情况并非如此，因为我仍然有几个输入正在正确更新。我是如何让它工作的仍然是一个我需要解决的谜。

moment.js 实例不是响应式的，因此您可以通过将 moment.js 实例扔到构造函数中来修复它，并在每次设置时创建一个新实例：

moment(this.currentDate)

this.currentDate 在这种情况下是一个 moment.js 实例。