[Vuejs]-How to set timer in Vuex?

by

3👍

✅

The problem is that this won’t execute click handlers:

@click="gameInActive? 'resetCounter' : 'startCounter'"

v-on (@) value should be either a function that is used as event handler, or an expression that is evaluated on event. This expression doesn’t result in resetCounter, etc function calls because typeof (this.gameInActive? 'resetCounter' : 'startCounter') === 'string'. It’s preferable to provide a single handler that will make decisions instead of putting conditions into a template.

Vuex supports promises, it’s preferable to use promise control flow for asynchronous actions. setTimeout callback is executed once. If it’s supposed to decrement multiple times, setTimeout should be used in a loop with await, or setInterval should be used instead.

Mutations are synchronous and commonly fine-grained functions that access the state directly. There can be ones called decrementCount, startCounter, etc.

  state: {
    count: 5,
    counter: false
  },
  actions: {
    async startCounter({ state }) {
      state.counter = true;
      while (state.count > 0 && state.counter) {
        await new Promise(resolve => setTimeout(resolve, 1000));
        if (state.counter)
          state.count--;
      }
      state.counter = false;
    },
    resetCounter(context) {
      state.count = 5;
      state.counter = false;
    }
  },
👤Estus Flask

0👍

First of all, click the StartResetButton.vue button and the function should be executed as follows.

  1. @btn-click="$emit"(‘change-game-button’) should be executed first, so that the gameInActive should be false.

  2. startCounter action must be executed.

Use console.log to verify that it runs in the order intended. I can’t see how it works because the post doesn’t have the StartResetButton.vue code.

startCounter action then executes the counter mutation, which, if the function is executed normally, will stop at 4 because the counter mutation is executed only once.

I recommend that the counter mutation be modified by only reducing the gameStartTimer by 1 and executing the counter mutation every 1 second using the timeout if the gameStartTimer value in the startCounter action is greater than 0.

👤Moon Juhan

Leave a comment