VueJS - Actions and Mutations

Handling Actions and Mutations in Vuex

Actions and mutations are fundamental concepts in Vuex for managing state. Mutations are synchronous functions that directly change the state, while actions can be asynchronous and commit mutations. This guide covers how to define and use actions and mutations in Vuex.

Defining Mutations

Basic Mutations

Mutations are defined in the mutations property of your Vuex store. They receive the state as the first argument:

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});
                

Committing Mutations

Mutations are committed from components using the commit method:

// src/components/Counter.vue



                

Defining Actions

Basic Actions

Actions are defined in the actions property of your Vuex store. They receive a context object, which includes the state and commit method:

// src/store/index.js
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment');
    }
  }
});
                

Dispatching Actions

Actions are dispatched from components using the dispatch method:

// src/components/Counter.vue



                

Asynchronous Actions

Actions can contain asynchronous operations, making them ideal for handling API calls or other asynchronous tasks:

// src/store/index.js
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});
                

Dispatching Asynchronous Actions

Dispatch asynchronous actions in the same way as synchronous actions:

// src/components/Counter.vue



                

Example Application

Here is a simple example application that demonstrates the use of actions and mutations in Vuex:

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    },
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});

// src/components/Counter.vue




// src/main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  store,
  render: h => h(App),
}).$mount('#app');
                

Best Practices

Follow these best practices when using actions and mutations in Vuex:

• Keep Mutations Simple: Mutations should be simple and focused on changing the state.
• Handle Async Logic in Actions: Use actions for all asynchronous logic, keeping mutations synchronous.
• Document Actions and Mutations: Document your actions and mutations to make them easier to understand and maintain.
• Test Your Store: Write tests for your actions and mutations to ensure they behave as expected and handle edge cases.
• Use Namespaced Modules: Use namespaced modules to organize your store and avoid naming conflicts.

Summary

This guide provided an overview of handling actions and mutations in Vuex, including defining and using basic and asynchronous actions and mutations. By understanding and utilizing actions and mutations, you can manage the state of your VueJS applications in a predictable and efficient manner.