Actions

Actions are quite similar to mutations, but they can contain async operations such as fetching data. The end-goal of an action is to commit one or more mutations.

Example

Presuming you're following-on from the getting started guide, We'll add a new action like so:

const actions = {
    updateTitle(context, payload) {
        context.commit('setTitle', payload.text);
    }
}

The updateTitle method has two parameters:

  • context is an instance of Beedle
  • payload is whatever is passed as the second parameter when you dispatch an action

Inside that method, you'll see that we are calling context.commit. This is us running a mutation and we're passing only the text that we want state.title to be.

Dispatch

The dispatch method is part of the Beedle object and runs actions for you. You can dispatch wherever there's a reference to your store. Let's use the storeInstance object from the previous step.

// An initialised store. Params redacted for brevity
const storeInstance = new Store({
    ...
});
    
// Dispatch the `updateTitle` action to update the title
storeInstance.dispatch('updateTitle', { text: 'The new text for the title' })

Like the previous step, you can also use destructuring here too:

const { dispatch } = storeInstance;

// A much cleaner call to the action
dispatch('updateTitle', { text: 'The new text for the title' });

Mutating state

To actually modify the state, our mutation will take over.

Move to Mutations guide >.