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!

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) !!