Approach for using setInterval / setTimeout in a vue-x store

timer.js

const MILLISECONDS_PER_MINUTES = 1000 * 60;

const state = {
  now: (new Date()),
  intervalTimer: null,
};

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

  setIntervalTimer(state, callback) {
    state.intervalTimer = setInterval(() => {
      if (callback) {
        callback();
      }
    }, MILLISECONDS_PER_MINUTES * 3);
  },

  clearIntervalTimer(state) {
    if (state.intervalTimer) {
      clearInterval(state.intervalTimer);
    }
  }
};

const actions = {
  pollNow({ commit, state }) {
    if (!state.intervalTimer) {
      commit("setIntervalTimer", () => commit("now"));
    }
  },

  clearPollNow({ commit }) {
    commit("clearIntervalTimer");
  },
};

const time = {
  namespaced: true,
  state,
  mutations,
  actions,
};

export default time;

What this store module does

It provides action that can start/stop a polling (setInterval) updating the current time (state.now) every 3 minutes.

Approach

I put both the setInterval and clearInterval calls in mutations because they are mutating state.intervalTimer.

setInterval is having a callback mutating another part (state.now), but the decision to mutate another property is driven in an action (pollNow).

I would love feedback on this approach.

Hi @meduzen, this is really awesome! I was having a bit of trouble implementing something like this myself and your solution helped me out! 😄

Hey, thanks for the feedback @cjbeattie! I forgot I made this gist. 😅