Using Actions for Asynchronous State Changes

Actions in Vuex are the primary way of handling asynchronous logic for your store. Mutations have to be synchronous, but actions can be asynchronous if they choose. The other difference is that actions get a context object that represents the store itself. This lets actions call mutations or work with the state directly. In general, most developers will call mutations from their actions.

This probably seems a bit confusing, but in general, think of actions as your asynchronous support for your store. It will make sense once we see an example or two.

Let's look at a sample action. The following snippet contains one mutation and an asynchronous action that will make use of the mutation:

  mutations: {
    setBooks(state, books) {
      state.books = books;
    }
  },
  actions: {
    loadBooks(context)...