CODEWITHSUNDEEP
javascriptvue.jsvuex
Silver
Silver

Reputation: 9

what is the difference between mutation and action

In Vuex, what is the logic of having both "actions" and "mutations?"

I understand the logic of components not being able to modify state (which seems smart), but having both actions and mutations seems like you are writing one function to trigger another function, to then alter state.

What is the difference between "actions" and "mutations," how do they work together, and more so, I'm curious why the Vuex developers decided to do it this way?

I've tried ....... 

import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    INCREMENT (state) {
      // mutate state
      state.count++
    }
  }
})

Error code 502

Upvotes: 0

Views: 1155

Answers (3)

Argeento
Argeento

Reputation: 53

Mutations Must Be Synchronous so there is no way to change the state in async operation.

To solve this problem, vuex provides actions that change the state by commiting the synchronous mutations

If you have sync operation just use mutation, otherwise action + mutation

Upvotes: 1

Isac Moura
Isac Moura

Reputation: 6878

Actions and mutations are similar in their behavior, so the differences are:

  • Actions can't change your state directly, so they need to commit an operation to your mutations.
  • Think in actions like your functions.
  • Mutations are responsible for modify your state in Vuex store. To call a mutation you have to commit an action that call the mutation.

Example:

 actions: {
    MODIFY({dispatch, commit, getters, rootGetters}, obj) {
        //Do something
        commit('mymutation', obj)
    }
}

mutations: {
    mymutation(state, obj) {
        store.state.count = 1
    }
}

You can check more about mutations and actions at Vuex documentation

Upvotes: 1

Raja Sekar
Raja Sekar

Reputation: 2130

  1. Components should not change the state directly.
  2. So you've to trigger a ACTION from the component.
  3. In action, you'll have the business logic like API call and It will trigger a call to MUTATION where the state updation happens.

Upvotes: 1

Related Questions