App.vue

<template>
  <div id="app">
		<p>
			Pending: {{ $store.state.getInfoPending }}
		</p>
		<p>
			{{ $store.state.getInfoData }}
		</p>
  </div>
</template>

<script>
export default {
	created () {
		this.$store.dispatch('getAsync')
	}
}
</script>

async-util.js

import axios from 'axios'

const doAsync = (store, { url, mutationTypes, stateKey }) => {
	store.commit(mutationTypes.PENDING)

	setTimeout(() => {
		axios(url, {})
			.then(response => {
				store.commit(mutationTypes.SUCCESS, response.data)
			})
			.catch(error => {
				store.commit(mutationTypes.FAILURE)
			})
	}, 1500)
}

export default doAsync

main.js

/* To run this gist, make an app using the vue-cli and webpack-simple template.
 * vue init webpack-simple some-app
 * also you will need to `yarn add axios vuex lodash --save`
 */

import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  el: '#app',
	store,
  render: h => h(App)
})

mutation-types.js

import _ from 'lodash'

const createAsyncMutation = (type) => ({
	SUCCESS: `${type}_SUCCESS`,
	FAILURE: `${type}_FAILURE`,
	PENDING: `${type}_PENDING`,
	loadingKey: _.camelCase(`${type}_PENDING`),
	stateKey: _.camelCase(`${type}_DATA`)
})

export const GET_INFO_ASYNC = createAsyncMutation('GET_INFO')

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import doAsync from './async-util'
import * as types from './mutation-types'

Vue.use(Vuex)

const mutationTypes = {
	SUCCESS: 'GET_INFO_SUCCESS',
	FAILURE: 'GET_INFO_FAILURE',
	PENDING: 'GET_INFO_PENDING'
}

const state = {
	info: {},
}

const mutations = {
	[types.GET_INFO_ASYNC.SUCCESS] (state, info) {
		state[types.GET_INFO_ASYNC.loadingKey] = false
		Vue.set(state, [types.GET_INFO_ASYNC.stateKey], info)
	},

	[types.GET_INFO_ASYNC.PENDING] (state) {
		console.log(types.GET_INFO_ASYNC.loadingKey)
		Vue.set(state, types.GET_INFO_ASYNC.loadingKey, true)
	}
}

const actions = {
	getAsync(store) {
		doAsync(store, {
			url: 'https://jsonplaceholder.typicode.com/posts/1',
			mutationTypes: types.GET_INFO_ASYNC
		})
	}
}

export default new Vuex.Store({
	state,
	mutations,
	actions
})

Following code seems extra in store.js:(and may confuse fellow developers)

const mutationTypes = {
	SUCCESS: 'GET_INFO_SUCCESS',
	FAILURE: 'GET_INFO_FAILURE',
	PENDING: 'GET_INFO_PENDING'
}

mutationTypes is needed because this doesn't seem to actually work with import

const mutations = {
	[types.GET_INFO_ASYNC.SUCCESS] (state, info) {

but this does

const mutations = {
	[mutationTypes.SUCCESS] (state, info) {

@tomnielsen importing mutation-types.js worked for me.

You probably didn't place mutation-types.js file in the same directory as store.js (store.js looks in his directory for mutation-types file, take a look at store.js import deceleration).

As @mahboob-awan said, mutationTypes is not necessarily needed, you might just use imported types.

Why do we pass the store to the ajax-utils functions like doAsync()? Why not import it? Also, when you would POST some data, e.g. registering a user, would you pass that data via the store to an ajax-utility function or would you pass it directly? I mean, couldn't we somehow save the reference to the store object in a "global" register, like a dependency register, and take it form there?

@padomu this was just example - importing it would be fine. As for your second comment - both ways are fine. This is just showing the concept for three different states.