Vuex Action vs Mutations

by

Question 1: Why did the Vuejs developers decide to do it this way?

Answer:

  1. When your application becomes large, and when there are multiple developers working on this project, you will find that “state management” (especially the “global state”) becomes increasingly more complicated.
  2. The Vuex way (just like Redux in react.js) offers a new mechanism to manage state, keep state, and “save and trackable” (that means every action which modifies state can be tracked by debug tool:vue-devtools)

Question 2: What’s the difference between “action” and “mutation”?

Let’s see the official explanation first:

Mutations:

Vuex mutations are essentially events: each mutation has a name and a
handler.

import Vuex from 'vuex'

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

Actions: Actions are just functions that dispatch mutations.

// the simplest action
function increment ({commit}) {
  commit('INCREMENT')
}

// a action with additional arguments
// with ES2015 argument destructuring
function incrementBy ({ dispatch }, amount) {
  dispatch('INCREMENT', amount)
}

Here is my explanation of the above:

  • A mutation is the only way to modify state
  • The mutation doesn’t care about business logic, it just cares about “state”
  • An action is business logic
  • The action can commit more than 1 mutation at a time, it just implements the business logic, it doesn’t care about data changing (which is managed by mutation)

More Related Contents:

  1. Vuex – Do not mutate vuex store state outside mutation handlers
  2. VueJS access child component’s data from parent
  3. Nuxt.js vuex store not persisted
  4. How to make dynamic routes on the vue router?
  5. How to access Vuex module getters and mutations?
  6. Vuex – Computed property “name” was assigned to but it has no setter
  7. Returning Promises from Vuex actions
  8. Vue Router return 404 when revisit to the url
  9. How to import and use image in a Vue single file component?
  10. How to implement debounce in Vue2?
  11. How to pass a value from Vue data to href?
  12. Axios can’t set data
  13. Vue: shared data between different pages
  14. Which command do I use to generate the build of a Vue app?
  15. vue-router — Uncaught (in promise) Error: Redirected from “/login” to “/” via a navigation guard
  16. Vue – how to pass down slots inside wrapper component?
  17. How to install vuetify 2.0 beta to the new vue cli project?
  18. How to have list + details pages based on API fetched content
  19. Vue: wait to render until all components are mounted
  20. Is it possible to emit from mounted in Vuejs?
  21. Passing event and argument to v-on in Vue.js
  22. How to setup SASS/SCSS/sass-loader in Nuxt
  23. Vue 3 Vite – dynamic image src
  24. Vue 3: Is getCurrentInstance() deprecated?
  25. How to navigate using vue router from Vuex actions
  26. Visual Studio Code breakpoint appearing in wrong place
  27. Refused to apply style from ” because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled
  28. How can I share data between non parent-child components in Vue
  29. Pass an object as param to router.push ([email protected])
  30. How to use microfrontends with Vue/Nuxt?

Leave a Comment