Компонент отображает время последнего обновления: «только что», «минуту назад», «5 минут назад», «вчера» и в таком духе. В него через
props передаётся timestamp
ts его обновления, а дальше он сам.
Отображаемое вычисляемое человекопонятное «5 минут назад» надо обновлять. Сразу после обновления раз в минуту. Потом раз в 15 минут, в час и потом.. да и потом можно раз в час, не жалко.
Не соображу,
как правильно заставить обновляться это свойство. По умолчанию оно просчитывается раз при рендере компонента и дальше сидит спокойно, т.к.
ts не меняется, причин для пересчёта нет.
Что пробовал. Добавил data-свойство
now, которое ни в чём не участвует, т.к. по факту эти строки «5 минут назад» считаются в отдельном модуле на основе переданного туда
ts и текущего времени, которое модуль и сам умеет узнать. При первом вызове вычисляемого свойства запускаю
setTimeout(), который обновит data-свойство
now. Но Vue ведь хитрооптимизирован! Если это свойство никак не используется в вычисляемом свойстве, то никакого обновления (вызова) не происходит.
Стоит добавить
console.log(this.now) в тело вычисл. св-ва, как ура, всё исправно тикает. Но в production все
console.* выпиливаются и обновления пропадут. Да и вообще это же костыль какой-то.
Так как мне задействовать никчемное data-свойство, или иначе вызывать обновление вычисляемого?
Сокращённый пример:
import ago from '@/utils/ago';
export default {
props: {
ts: Number,
},
data: () => ({
now: Date.now(),
}),
computed: {
lastUpdated: function() {
console.log("[lastUpdated]", this.now); // так обновляется
// console.log("[lastUpdated]"); // а так не обновляется
const that = this;
setTimeout(() => that.now = Date.now(), 5000);
return ago(this.ts);
}
}
}
Простой