Using Vuex in modules in a modular laravel application

Image courtesy: https://vuejobs.com/

Hey everyone, how is everyone doing? Hope great.. 😊

A while ago, I wrote an article on using vuex, vue router with laravel. Since this is a kind of sequel to it, I strongly recommend you all get to the article and read it once.

Wouldn’t it be terrible to watch second episode of Games of thrones without watching the first one right? 😉

What now inspired me to write, now?

One of my friends Madhu Sudhan Subedi shared my article on a facebook group and I got this comment.

An excerpt from the above comment.

And the thing not well explained in the article is about managing multiple stores and states.

So, we will be learning what Madhu suggested in the comment. Use of Vuex, Vue router in modular application.

What is modular approach design?

From wikipedia

Modular programming is a software design technique that emphasizes
separating the functionality of a program into independent, interchangeable modules, such that each contains everything necessary to execute only one aspect of the desired functionality.

Benefits?

1. Fewer bugs as things are decoupled.
2. Solving bugs get easy.
3. Many developers can work on same project without a way too less conflicts and hassle.

What I am expected to know before I get started with the article?

A good basics on Vue, Vuex, Vue router, laravel.

Business Logic

Implementing multiple modules in the previous project would have been a bit hectic and kind of over-engineering, so I thought of adding user module to it. Now here are two modules Note and User. Please make sure to have a quick sneak peek into Note App.

Github Link

Lets get started..

Firstly lets run all the migrations with :

php artisan migrate

Then lets create our api’s to get all the relavant data.

The above are all the api’s we need through this whole project.

Lets create our back end routes now.

As soon as the index blade is called, the note/app.js (noteApp) is executed.

note/app.js

We are importing the routes and store file here, injecting routes to the vue router, creating a vue instance with that store and router and finally mounting it.

note/routes.js

On hitting domain/note (note-app-spa.herokuapp.com/note) one will be redirected to the note component. Since note and favourite component are pretty much the same I have used the same component for rendering of the notes and favourite note list.

Lets have a quick look on how we managed our store before jumping into the note component.

Apart from that we created a new vue instance and injected routes and store to it. Now lets look on our note’s store file.

note/store/index.js

We have imported note’s state, note’s action and note’s mutation and created a store with it and exported it.

note/store/state.js

All we have done here is created a state object with notes and favouriteNotes and exported it.

note/store/actions.js

note/store/mutations.js

In the previous post we had all our state, actions and mutations on one single file, it probably will be fine if we still choose to do so, but as our application goes on getting larger segregating state, actions and mutations will be more scalable and readable. For more on structure one can go through official doc.

Diagrammatic view.

Github Link .

Lets now again head to our note/app.js file. According to the route on hitting your_domain/ one will get redirected to the note component. If we have a look on the state, actions and mutations we can find we have placed only those which are related to notes.

note/components/note.vue

The note component does a loads of things but basically it is responsible to render, edit notes and favourite notes and toggle the favourite state of notes.

There are other things going in the note component. But lets stay focused to the store part.

While we created the vue instance for note/app.js in we had injected the note store to vue instance which means the note’s store is accessible to us and we can use note’s state or actions using mapState or mapActions thats what we have done above. Now what we can do is to get all the notes we can simply do

this.getAll()

and this would be array of note object.

this.notes

I hope you got a good grasp on how are things are working above, if so understanding the user module would be just a breeze. I would not explain the whole user module since it is almost the same. But here is something I would like to talk about regarding the user module, almost everything else is just the same.

User is an entirely different module from note but here is a situation, we need to access some methods in the user module that is already present in the note’s action so what shall we do?

Lets see what we can do.

user/store/index.js

What we did is imported actions from note/actions.js since that’s the only thing we need.

Then while we created store instead of passing store, actions and mutations like we did in the note/store/index.js we passed module.

Official Modules Documentation

Lets now see how we managed our store for our user component on our user/app.js.

The way we did here is fairly the same. We instantiated a new vue router component with routes from user module and store in the same way.

Now what we simply did in the user component is.

...mapState(['userModule']),
...mapActions([
  'get',
  'getUserNotes',
  'toggleFavourite',
  'getUserFavouriteId',
]),

Mapstating and mapactions basically means to map the state and actions of the store of user. This means we now have access to the state available in the user’s store just by doing

// user store (state)

export default{
  users: [],
  userNotes: [],
}

we can now do inside of vue component to get users array.

this.users;

With mapactions we mean mapping actions, we now can simply do

this.getUserNotes(this.userId);

inside of user component to get the respective user notes.

Refactorings

• Implementing proper validation.
• Code is horrible at few places, refactoring has to be done and I will be doing that asap.
• Style has to be fixed as well.

Future plans

• Synchronization between multiple tabs in a browser or multiple browser.
• Let the user create public and private notes.

Please pour in any suggestions if you have.

I also took ideas from

1. Coligo’s tutorial
2. Simple note app

Thanks

I would like to thank Sajan Rajbhandari for providing me the loading component.

Also would love to thank Saroj, Sabin, Madhu Sudhan, Asmit, Ayush, Sanesh for all the technical assistance.

Last but not the least my cordial gratitude goes to all the readers.