Как реализовать обновление состояния в хранилище в реальном времени?

Question

[Daniele_Viotti]

Есть следующий Vuex store:

state: {
  datetime: new Date(),
},

getters: {
   getDatetime: state => state.datetime,
}

Вытягиваю эту переменную в шаблон с помощью getDatetime:

computed: {
   getDatetime() {return this.$store.getters.getDatetime;}
}

Однако время "застывает" и не меняется до перезагрузки страницы.
Как заставить getter состояния "new Date()" обновляться в real-time?

Answer 1

[0xD34F]

Хранилище:

state: {
  date: null,
  interval: null,
},
mutations: {
  update(state) {
    state.date = new Date();
  },
  start(state) {
    if (!state.interval) {
      state.interval = setInterval(this.commit, 1000, 'update');
    }
  },
  stop(state) {
    if (state.interval) {
      clearInterval(state.interval);
      state.interval = null;
    }
  },
},

Компонент:

computed: {
  timerActive() {
    return !!this.$store.state.interval;
  },
  timeStr() {
    const { date } = this.$store.state;
    return date instanceof Date
      ? [ 'getHours', 'getMinutes', 'getSeconds' ]
          .map(n => `${date[n]()}`.padStart(2, 0))
          .join(':')
      : 'ВРЕМЕНИ НЕТ';
  },
},
created() {
  this.$store.commit('start');
},

<button @click="$store.commit('start')" :disabled="timerActive">start</button>
<button @click="$store.commit('stop')" :disabled="!timerActive">stop</button>
<div>{{ timeStr }}</div>

Comments

[Daniele_Viotti]

Переделал вот так, но время все равно не обновляется

computed: {
  getDatetime() {
	setInterval(() => {
		return this.$store.getters.getDatetime;
		}, 1000)
	},
}

[0xD34F]

Переделывать надо было не "вот так", а как в ответе сказано.

Ну и может стоило js изучить, прежде чем за vue браться? Вы хотя бы примерно понимаете, что написали? При вычислении свойства устанавливается интервал, коллбек в никуда возвращает значение из стора. Круто.

Answer 2

[tvsjke]

store.js

const state = {
  now: new Date
}

const actions = {
  start ({ commit }) {
    setInterval(() => {
      commit('UPDATE_TIME')
    }, 1000)
  }
}

const mutations = {
  UPDATE_TIME(state) {
    state.now = new Date
  }
}

component.vue

computed: {
    ...mapState(['now'])
}

Не забудь start вызвать

Геттер не обязательно использовать.