Vue Momentjs实时更新相对时间

时间:2019-01-20 19:40:43

标签: javascript vue.js vuejs2 momentjs

如何为用户实时更新momentjs中的相对时间?

我已经计算出:

computed: {
ago() {
  return moment().fromNow();
},
}

当我在组件中使用时:

<span class="text-muted pr-2" v-text="ago"></span>

我得到静态文本:a few seconds ago,如何在不重新加载页面的情况下更新此文本?我想看看:a minute agotwo minutes ago等。

如何为用户实时执行此操作?

2 个答案:

答案 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)
  }
});