What is the best way to stop a Vue.js state using clearInterval()?

Question

What is the best way to stop a Vue.js state using clearInterval()?

In my Vuex code, I currently have the following:


export default new Vuex.Store({
    state: { 
        intervalVar: 0
    },

    mutations: {
        SET(state, {key, value}) {
            state[key] = value
        },
    },

    actions: {
        doSomething({commit}) {
            commit("SET", {
                key: 'intervalVar',
                value: setInterval( () => console.log('hi'), 30000)
            })
        }, 
    }, 
})

While I assign the value of setInterval to state.intervalVar, I am unsure of how to properly clear this interval using state.intervalVar.

javascript vue.js vuex

Answer 1

Answer №1

To perform a SET mutation, you can pass the value 0:

actions: {
    stopTime({state, commit}) {
        clearInterval(state.intervalVar)
        commit("SET", {
            key: 'intervalVar',
            value: 0,
        })
    }, 
},

Answer 2

To perform a SET mutation, you can pass the value 0:

actions: {
    stopTime({state, commit}) {
        clearInterval(state.intervalVar)
        commit("SET", {
            key: 'intervalVar',
            value: 0,
        })
    }, 
},

Answer 3

Answer №2

Is there a way to easily stop the interval by adding a new action?

export default new Vuex.Store({
    state: { 
        intervalVar: 0
    },
    mutations: {
        SET(state, {key, value}) {
            state[key] = value
        },
        CLEAR(state, key) {
            clearInterval(state[key]);
        }
    },

    actions: {
        async doSomething({commit}) {
            commit("SET", {
                key: 'intervalVar',
                value: setInterval( () => console.log('hi'), 30000)
            })
        },
        clearSomething({ commit }) {
            commit('CLEAR', 'intervalVar');
        }
    }, 
})

Answer 4

Is there a way to easily stop the interval by adding a new action?

export default new Vuex.Store({
    state: { 
        intervalVar: 0
    },
    mutations: {
        SET(state, {key, value}) {
            state[key] = value
        },
        CLEAR(state, key) {
            clearInterval(state[key]);
        }
    },

    actions: {
        async doSomething({commit}) {
            commit("SET", {
                key: 'intervalVar',
                value: setInterval( () => console.log('hi'), 30000)
            })
        },
        clearSomething({ commit }) {
            commit('CLEAR', 'intervalVar');
        }
    }, 
})

What is the best way to stop a Vue.js state using clearInterval()?

Answer №1

Answer №2

Similar questions

The jQuery .load function does not function properly when an ajax query is already underway

Is it preferable to include in the global scope or the local scope?

Unable to access the POST value in the current context

Having trouble locating the web element within a div popup while utilizing Node.js and WebdriverIO

Easily move a group of HTML elements at the same time with a simple

What is the best way to implement a custom toast delay in a React application using setTimeout

Creating identical HTML output using PHP and JavaScript

I am looking to update the appearance of a button dynamically in Vue.js based on changes to an

Adjusting div position because of navigation bar elements above

Choose the div without a class

Vue 2.0 custom filter not producing any output

What is the best way to determine the value of a variable specific to my scenario?

How can I select the div inside the second to last li element?

Connecting socket.io to a Vue.js single page application using Javascript

Generate a list item that is contenteditable and includes a button for deletion placed beside it

What is the best way to create a fade effect when toggling the class "hover"?

Initiate the Html.BeginForm process in an asynchronous manner

Mastering universal code creation with the composition API in Quasar

Differences between using Array.from and a for loop to iterate through an array-like object

I am unable to find the URL /receipt on this server, however it is functioning properly on localhost