You can minimize Vuex boilerplate in under a minute.

When building applications you often need to communicate with other services or your back-end API. A lot of the times in your Vue application you find yourself having actions like below.

	export const getUsers = ({commit}, params) => {
	return axios.get('http://api.domain.com/users', {
	params
	}).then(resp => {
	commit('GET_USERS_SUCCESS', resp.data)
	return resp.data
	})
	}
	export const getDrivers = ({commit}, params) => {
	return axios.get('http://api.domain.com/drivers', {
	params
	}).then(resp => {
	commit('GET_DRIVERS_SUCCESS', resp.data)
	return resp.data
	})
	}

view raw actions.js hosted with ❤ by GitHub

While there is absolutely nothing wrong with the actions, you realize that there is repetition in the two actions. Lets identify the repetitions and simplify the code.

There are 3 ways you can simplify the above code.

• Set a base API URL. I am using axios to make my requests.

	axios.defaults.baseURL = 'http://api.domain.com'
	//then later in your actions
	axios.get('/users') // to minimize typing the domain in full
	// getDrivers
	axios.get('/drivers')

view raw default_url.js hosted with ❤ by GitHub

• Since they are both get request, you can merge them into one and make the get request more generic.

	export const get = ({commit}, {url = '', params = {}}) => {
	axios.get(url, {
	params
	}).then(resp => {
	return resp.data
	})
	}

view raw generic.js hosted with ❤ by GitHub

• You have to be keen on commit since not all get requests get persisted to the vuex store. It all depends on your application though.

	export const get = ({commit}, {url = '', params = {}, type = '', canCommit = true}) => {
	axios.get(url, {
	params
	}).then(resp => {
	if (canCommit) {
	commit(type, resp.data)
	}
	return resp.data
	})
	}

view raw commit.js hosted with ❤ by GitHub

Now when you need to issue another get request i.e. getAllShops getUserLogs you will not need to setup separate actions for getting shops and user logs . All you need to do in your component is

	//get all shops
	const shops = await this.$store.dispatch('get', {
	url: '/shops',
	params: {
	type: 'all'
	},
	type: 'GET_SHOPS_SUCCESS'
	})
	// use your response if you need to
	//get user logs
	const logs = await this.$store.dispatch('get', {
	url: `/users/${userId}/logs`,
	canCommit: false
	})

view raw incomponent.js hosted with ❤ by GitHub

You can do the same for POST, PUT AND DELETE requests. This is how I handle requests in my applications and I can tell you for a fact it has increased my development speed.

If this post was helpful please share it and stay tuned for my other articles. You can follow me on GitHub and LinkedIn. If you have any ideas and improvements feel free to share them with me.

Happy coding!

Comments

[Nando]

emmmh ... I think that something is missing ...

[Sadick]

I appreciate your suggestion. Whats missing?

[Nando52]

you wrote: "A lot of the times in your Vue application you find yourself having actions like below"
... but I don't find any code "below" !
maybe a strange behaviour of my browser ?

[Sadick]

Thanks for pointing that out. Hope it is now sorted.

[Nando]

it's all right now (baby blue) !!