Vue.js 2 Design Patterns and Best Practices

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. ...