State, Getters, Mutations and Actions in Vuex

Introduction to Vuex

Vuex is a state management pattern and library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

In this tutorial, we will discuss about the core concepts of Vuex: State, Getters, Mutations and Actions.

Understanding State in Vuex

The state in Vuex is like a single source of truth where we store all the data needed for our application. It's like a data warehouse of our application. Each application will have a single store, and this will be single state tree - that is, this single object contains all your application level state and serves as the "single source of truth".

For example, we can define our state like below:

const store = new Vuex.Store({
  state: {
    count: 0
  }
})

Accessing State

To access state in our components, we can simply use this.$store.state.ourPropertyName. However, this could lead to code duplication and lack of flexibility. To solve this, Vuex allows us to use mapState helper.

import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // arrow functions can make the code more concise!
    count: state => state.count
  })
}

Understanding Getters in Vuex

Getters are like computed properties for stores. They receive state as their 1st argument. We can use them when we want some derived state based on store state.

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

Understanding Mutations in Vuex

Mutations are the only way to change state in Vuex store in a synchronous manner. Each mutation has a string type and a handler. The handler function is where we perform actual state modifications, and it will receive the state as the first argument.

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

Committing Mutations

We cannot directly call a mutation handler. Think of it more like event registration: "When a mutation with type 'increment' is triggered, call this handler." To invoke a mutation handler, you need to call store.commit with its type.

store.commit('increment')

Understanding Actions in Vuex

Actions are similar to mutations, the differences being that:

• Instead of mutating the state, actions commit mutations.
• Actions can contain arbitrary asynchronous operations.

Let's register a simple action:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

Dispatching Actions

Actions are triggered with the store.dispatch method:

store.dispatch('increment')

And that's it! We have discussed the core concepts of Vuex - State, Getters, Mutations and Actions. Vuex might seem a bit much to understand at first, but once you see the problems it solves, you'll understand why it's a crucial part of large scale applications. Keep practicing and happy coding!