Recently, I have been working with vuejs quite a lot and at first when I received the project, I read the code of the previous person, there were parts that I did not know why I wrote that => I did not understand what they wrote. But after researching, I found it quite useful and made it easier to extend, avoid code duplication and look cleaner.

1, Slot why not?

Usually when creating a component, we will pay attention to the prop, state, and event of that component because it is the basics of a component. And just a few more small functions and the component can work properly.

But every little thing that accumulates will become a big lump and then have to sit to refactor them. Popup in the past needs to be expanded and it no longer meets the needs, display more banners or something as the customer requested – thêm vài cái prop nữa là giải quyết được ý mà 🥲🥲 – dùng thêm emit chỗ này này vậy là xong rồi 🥲🥲.

Then the component looks like a bunch of unreadable junk.

Then let slot handle it to make those codes shorter and easier to understand.

An example that makes it easy to understand but I don’t understand anything when I read the words:

Read more about slots here https://vuejs.org/v2/guide/components-slots.html

Using the right place will make the code more extensible and readable. Events are also divided into no longer concentrated in one component (several thousand lines of code for example).

2, Store in VueX

When you need to use data in another component but have to access some other components to get them, then use store to solve it.

for example, when you want to get the information of the user who is using the page, you just need to create a store to get the information and retrieve it.

Components:

And now just use mapState to get the user’s information. And of course, I just named after the example. That is why we should name the file store so that others can read it and know what it is for.

3, Call API in action and commit data (Vuex)

As in the example above, did I call the api with axios to get the user’s information and did you notice that I called the api in action and used commit to save the user’s information and why should I do that?

Because:

• If on 2 pages that call the same Api, we have to call that API again on 2 pages, it seems that the code is duplicated here. If you already call that api in action then we just need to dispatch that action and it’s done.
• More importantly, our code will be more logical and clear when we know where the api we call is.

4, Use mapState, mapGetters, mapMutations and mapActions

When I first learned vuex. When I want to access state, getters, or dispatch action, I usually use it like this:

The above code is also correct and there is nothing wrong with it, but it looks too verbose and not very clean. Instead you should use mapState , mapGetters , mapMutations and mapActions

That way the code will look cleaner. You can read more about them here:

• State
• Getters
• Mutations
• Actions

So that’s it

Above are a few of my experience working with vue. Thanks for reading my post. If it’s good, give me an upvote for more motivation