Question

如何为用户实时更新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等。

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

Answer 1

我在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”在加载时由应用程序的顶部调度一次。

Answer 2

由于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)
  }
});

Vue Momentjs实时更新相对时间

2 个答案: