In this article, we will be discussing how to consume API data with Vue.js using the Repository Pattern.

The Repository pattern is one of the most popular patterns to create an enterprise level application. It restricts us to work directly with data in the application and creates new layers for database operations, business logic and the application UI.

Why you should use Repository Design Pattern

1. The data access code can be reused.

2. Its easy to implement domain logic.

3. It aids us with decoupling of logic.

4. Your business logic can be unit tested easily without data access logic.

5. Its also a good way to implement dependency injection which makes your code more testable.

In Repository Design Pattern, you an hide the details of the data eventually stored or retrieved to and from the data store.

Vue.js is a progressive JavaScript framework mainly used to write front-end but Vue.js has evolved a lot more than just a front-end framework. Read more here.

There are many articles and talks about Repository Design Pattern and how to implement it in many programming languages but in this article, I will be showing how to implement Repository Design Pattern in your Vue.js application.

Prerequisites

1. Basic knowledge of Design Patterns especially Repository Patterns

2. Basic knowledge of Vue.js

3 .Basic Knowledge of JavaScript.

You know you can always learn without prior knowledge of some of them.

Before we start take a look at what we will be building here. https://repository-pattern-vue.firebaseapp.com/

To consume data with Vue.js using the Repository Design Pattern which aids us with decoupling, follow these simple steps.

1. Create a Repository folder

2. Create a Clients folder (Could be named any though, I personally like Clients )

3. Create a Client.js class/interface: Contains all the API Client configuration including all CRUD/ verb methods and again it could be named anything you like.

4. Create the individual repository class e.g. PostRepository.js: This class contains all the manipulation involved with Post endpoint.

5. Import the Client.js class into all the Individual Repository classes created.

6. Define the different API requests inside individual repository e.g CRUD.

7. Create a RepositoryFactory.js Class to retrieve all the different repository by name or key.

8. Use it within any of your model, controller or Vuex stores.

So there you have it. That’s all there is to consuming your data with Vue.js using the Repository Design pattern theoretically, now let’s get our hands dirty with codes so we can understand it practically too.

I will take it step by steps and show screenshots along.

Create a Repository folder

I will go ahead to create a repositories folder inside my src folder of my application.

cd src && mkdir repositories

Create a Clients folder

I will create a Clients folder inside my newly created repositories folder, basically what will be inside this folder are the different HTTP Clients you might want to make use of, for example, if you want to use Axios (my best) or Vue-resource etc.

cd repositories && mkdir Clients

Create a xxxClient.js class/interface

You can create an interface/abstract class that will enforce a contract between each Clients if you are going to be using different Clients. But in my case I use only Axios, so I just create AxiosClient.js file and put in all default configuration for Axios.

In summary, you might want to use many HTTP Clients, so you create different xxxClient.js file for each with their specific configuration or an interface/abstract class for generic configuration.

touch xxxClient.js

For Axios, These are my default configurations just for this test.

Create individual repository class

You should already guess what will be in these classes (if not), the different API operations that will be done within a particular feature of your application. I will demonstrate with a single feature of my application… POST.

So I will create a PostRepository.js file inside the repositories folder and put in the below codes and even more.

touch PostRepository.js

Paste in the codes below.

Import the Client.js class into all the Individual Repository classes

If you look at the source code above we imported/required the xxxClient.js file into all the individual repository classes and use it to make API requests.

Define the different API requests inside individual repository

Also in the code above we define and export all our API requests in our case we simply did CRUD

Create a RepositoryFactory.js Class

Create a Factory Class inside the repositories folder called RepositoryFactory to export all the different individual repositories that you may have created, so its easy to use anywhere across our application.

touch RepositoryFactory.js

Put in the following codes and make changes accordingly if you are not following our example project.

Use it within any of your model, controller or Vuex stores

If you are here, congratulations, this is where we make use of our hard works above, Since we are dealing with Vue.js, I will demonstrate how to use it in Vue Components and Vuex Stores. But its same approach to use it in Models, Controllers in fact anywhere.

USING IT IN VUE COMPONENTS

Create a Posts Component and import and use the repository as shown below.

USING IT IN VUEX STORE

I love Vuex and will love to explain more about it but its just beyond the scope of this article but just a tip won’t hurt.

Vuex is State management library for Vue, You can read more and how to get started here.

Create a store.js file and paste in the following code.

Now you can use the vuex store inside your post component like so.

N/B: I created a new post.vuex.vue component just to use Vuex with it.

Alright guys, there you have it, if you got here well done, congratulations and thank you for reading.

Summary

Using Repository Design pattern can help you write clean and less code in a component therefore reducing code coupling just as we have demonstrated.

Don’t forget to drop 50 CLAPS

Conclusion

There you have it, if you have any further contributions, questions or feedback, please drop it. Also don’t forget to CLAP if you find the article useful,

I hope you learnt something new with Vue, Vuex and Repository Pattern. The full code is on GitHub, get it now.

Thank you for reading my article. Here at my blog or medium I regularly write about backend development, digital marketing and content management system. To read my future posts simply join my publication or click ‘Follow’ Also feel free to connect with me via Twitter, Facebook, Instagram.

If you are interested in backend development (or you’re internet enthusiast) both (Mobile | Web | Desktop) videos subscribe to my Youtube channel, we will be posting a collection of help full tutorials and guides like this one for artisans.

If you enjoy this post, make sure to let us know and share it with your friends and subscribe to my growing channel.

Sharing is caring.