Core Concepts: Actions

Vuex actions allow us to perform complex logic within the state machine. For example, we can use Vuex actions to centralize API communication, do checks, and trigger other actions. Actions can trigger further actions, one or more mutations, or both. Some apps have established the convention that mutations must be triggered by actions only and may not be triggered by a component directly.

How to define actions

To define Vuex actions, we add them as functions in a nested object inside the store object. The object key represents the name of the action. Each action receives a context as an argument. The context includes the current state of the store and the function commit to trigger mutations and dispatch to trigger further actions. The second optional argument is a payload we can pass to the action.

The example below implements an action called loadData, which triggers two mutations and a single other action: