Next step with Vuex : Module based Vuex

To understand this article, you should have a good experience with Vue and Vuex

Introduction

When you work with Vue and single file Vuex in your project, you might be seen your store.js file number of the line goes more than 1000/2000. With this number of lines codes, you might get hard to find the bugs. After 3 or 6 months later, If your team lead asks you to work with the Vuex again, I’m sure it’s too hard to work and manage the existing store.js file. So how can we optimize the store and make it easy to work at any time, Vuex module will help us to sort out.

Why do we need to wait, let’s start?

This article will explain to you how can we use the module based Vuex with step by step and code explanation.

Project Overview

This project contains two different pages, login, and movie listing. when the user logged in to the system, they can see the movie listing page.

hm… How are we going to handle API calls?

I have created two different JSON file which contains the user listing and movie listing(which is got from The Movie Database (TMDb)). And under the service directory, two API services are used to handle the JSON files. Lets see with the screenshots.

Movies List

movies data movies.json

Movies Service

movies service movies.service.js

This movies service file, I have added the promise to make like a real API call. what actually this file will do is, get the movies from the movies.json file and after 2 seconds return the movies list.

Users List

users list users.json

User Service

user service user.service.js

This service is used to log in to the user. In order to log in, you need to pass the email and password. If the login succeeds, it will return that user object with the success code otherwise returns fail message and code.

If you not familiar with promises, you can check it out in the MDN link.

Okay, good enough with the data and service file configurations. Let’s get into the topic. To handle the Vuex I’ve created two different files one is for movie and the other one is for the user. Both files are connected with the index.js file, which is inside the Store directory.

Users store file

user.js

This configuration is used to login the user and save the user object details to store if its succed.

Movies Store file

movies.js

The above code is used to get the movies from the API and save it in the store.

Main store file

index.js

Each module(user and movies) can contain its state, mutations, actions, getters even nested modules.

Namespacing

All the modules state mutations, actions, and getters are by default registered under the global namespace. If you want to have a self-contained or reusable module, you should add the namespace:true in each module. Once you add namespace:true in the module, all of its getters, actions, and mutations will be automatically namespaced based on the path the module is registered at.

Now connect the store with each component.

Login page

login.vue

When user hit the login button, the code will call the store to login the user, let’s see how the code looks like in the login page.

loginFn function login.vue

To access loginUser action from the user store, you should call “user/loginUser”. Okay, where the user came from? It’s defined in the main store index.js file.

Movies page

movies.vue

movies.vue

When the user gets into this page(“/movies”), Getting the movies list from the API by calling the movie action called getAllMovies. Once the data fetched and updated to the store, mapState located in the computed property will give us the movies list. If you want to have multiple values in the mapState, you can use the same way as the normal one.

Make a note here to access mapState, mapAction, and mapStore, you must put the module name, which is defined in the index.js file. Example below.

mapState

...mapState({
    movies: state => state.MODULE_NAME.movies,
    mostRatedMovies: state => state.MODULE_NAME.mostRatedMovies
  })

mapGetters

...mapGetters({
    a: 'MODULE_NAME/GETTERS_NAME',
    a: 'MODULE_NAME/GETTERS_NAME',
  })

Conclusion

This article contains the basic steps in the Vuex module. In the future, you can expect the advanced version of the Vuex module. In the large scale applications, the module based Vuex will help us to work easier, and reduce the time for debugging. You can find the project code from the GitHub page. cheers 😀😀

Thanks for reading this article. Please leave claps if you find it useful! And I will be happy to hear any feedback.