如何为用户实时更新momentjs
中的相对时间?
我已经计算出:
computed: {
ago() {
return moment().fromNow();
},
}
当我在组件中使用时:
<span class="text-muted pr-2" v-text="ago"></span>
我得到静态文本:a few seconds ago
,如何在不重新加载页面的情况下更新此文本?我想看看:a minute ago
,two minutes ago
等。
如何为用户实时执行此操作?
答案 0 :(得分:2)
我在Vuex商店中使用全局“代码”来解决此问题。它每30秒开始在负载下增加自身。当时的描述性消息与此代码比较,而不是“ now”或其他任何其他实现。相对于每个UI元素每秒迭代其日期时间行情记录之类的东西而言,此技术的优势在于,您不会在Vue中使用任何反应性元素,而它们会定期自动刷新。在我的应用程序中,一个全局“伪立即”行情自动收录器每30秒迭代一次,提供描述时间的所有元素都在一帧中一次刷新。这会提高性能。
Vuex相关商店中的片段:
import Vue from 'vue'
const TICKER_INTERVAL = 30000; // milliseconds
let tickerPointer = null;
const data = {
state: {
now: new Date,
},
mutations: {
refreshTicker(state) {
state.now = new Date;
},
},
actions: {
startTicker({commit}) {
if (tickerPointer === null) {
tickerPointer = setInterval(() => {
commit('refreshTicker');
}, TICKER_INTERVAL);
}
},
haltTicker({state}) {
clearInterval(tickerPointer);
state.now = null;
tickerPointer = null;
},
“ StartTicker”在加载时由应用程序的顶部调度一次。
答案 1 :(得分:1)
由于moment().fromNow()
不起作用,因此您将看不到任何变化,因此,我们修复了旧时属性,该属性应在created
钩子中初始化 this.oldTime = new Date();
,并根据我们称为 moment(this.old).fromNow();
的旧时间属性,将时间间隔设置为 1s ,以更新我们的属性 {{1 }} 。
ago
// ignore the following two lines, they just disable warnings in "Run code snippet"
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data() {
return {
ago: '',
oldTime: ''
}
},
created() {
this.oldTime = new Date();
setInterval(() => {
this.ago = moment(this.oldTime).fromNow();
}, 1000)
}
});