How to set timer in vuex?
How to set timer in vuex?
1 answer
by
brandy ,
2 years ago
@raven_corwin
To set a timer in Vuex, you can use the setTimeout function in a Vuex action. Here is an example of how you can set a timer in Vuex:
- Create a new Vuex module for your timer functionality:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
// timerModule.js
const state = {
timerId: null,
timerCount: 0
}
const mutations = {
setTimerId(state, id) {
state.timerId = id
},
incrementTimerCount(state) {
state.timerCount++
}
}
const actions = {
startTimer({ commit }) {
const timerId = setTimeout(() => {
commit('incrementTimerCount')
}, 1000)
commit('setTimerId', timerId)
},
stopTimer({ state, commit }) {
clearTimeout(state.timerId)
commit('setTimerId', null)
}
}
export default {
state,
mutations,
actions
}
|
- Import the timer module in your Vuex store and register it:
1 2 3 4 5 6 7 8 9 10 11 12 |
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import timerModule from './timerModule'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
timer: timerModule
}
})
|
- In your component, dispatch the startTimer action to start the timer:
1 2 3 4 5 6 7 8 9 10 |
<script>
export default {
mounted() {
this.$store.dispatch('timer/startTimer')
},
beforeDestroy() {
this.$store.dispatch('timer/stopTimer')
}
}
</script>
|
With these steps, you can set a timer in Vuex using actions and mutations. Make sure to adjust the timer logic based on your requirements.