Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

State Management with Vuex Chapter 21

Defining action types

We can then create a file inside src/store named mutation-types.js, which contains

the various actions that the user may take within our application:

export const INCREMENT = 'INCREMENT';

export const DECREMENT = 'DECREMENT';

export const RESET = 'RESET';

Although we don't have to explicitly define our actions like this, it's a good idea to use

constants where possible. This allows us to take better advantage of tooling and linting
techniques, as well as allowing us to infer the actions within our entire application at a

glance.

Actions

We can use these action types to commit a new action to be subsequently handled by our
mutations. Create a file inside src/store named actions.js:

import * as types from './mutation-types';

export default {

[types.INCREMENT]({ commit }) {

commit(types.INCREMENT);

},

[types.DECREMENT]({ commit }) {

commit(types.DECREMENT);

},

[types.RESET]({ commit }) {

commit(types.RESET);

},

};

Inside each method, we're destructuring the returned store object to only take the commit

function. If we didn't do this, we'd have to call the commit function like this:

export default {

[types.INCREMENT](store) {

store.commit(types.INCREMENT);

}

}

If we revisit our state diagram, we can see that after committing an action, the action is

picked up by the mutator.