DEV Community

Sadick
Sadick

Posted on • Originally published at Medium on

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.

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.
  • Since they are both get request, you can merge them into one and make the get request more generic.
  • 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.

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

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!

Top comments (5)

Collapse
 
fc250152 profile image
Nando

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

Collapse
 
sadick profile image
Sadick

I appreciate your suggestion. Whats missing?

Collapse
 
nando5201 profile image
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 ?

Thread Thread
 
sadick profile image
Sadick

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

Thread Thread
 
fc250152 profile image
Nando

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