VueJS – Practical Project Tips and Applications.

Preamble.

After working with Vue for a while with the actual project. During working with it I also encountered a lot of problems that arose. It helps me learn a lot of interesting things.
So I have gathered some cases but good advice or tips. Hope this article can help you save a little time when encountering it.

Start learning Vue.

If you are a beginner of studying and studying with vue, you do not have to be confused as it is very easy to understand and support unlike what you think.
Starting with Vue, I recommend that you start learning the basics of vue in the order I am about to list below.

Install VueDevtools

For Me VueDevtools is an indispensable tool for 1 dev code Vuejs. This is a browser extension.
It can help you check if you have encountered problems such as variables or events that have been called.
https://github.com/vuejs/vue-devtools

Component Communication

With the real project, almost one screen is made up of many components. So we have to create data link between the components and it is divided into 3 main categories:

• Case 1: passing data from parent component => child components, we must use props:
  <my-component :firstProp="someValue"></my-component>
• Case 2: passing data from child component => parent component, we must $ emit data:
  The child component emit data: </br>

the parent component listens to events from the child component by.
<my-component :firstProp="someValue" @nameOfEvent=”doSomething”></my-component>

• Case 3: using EventBus Case 2: Basically, these two cases are often used, but this case is also very useful when using small and medium amount of data, it’s simple and easy to use.
  We created a vue to link but the component has no relationship or relationship through it. To create it, follow the detailed article below.
  https://alligator.io/vuejs/global-event-bus/

Use Vuex

For small data, we use EventBus, but for complex big data, we use nothing. That’s why people created vueX to handle more complex data.

The Vuex store is built in such a way that it cannot change its state from any component. Ensure that the state can only vary in a predictable manner. So your store becomes a reliable source: each data element is only saved once and only readable to avoid application components from ruining the state of being retrieved from other components.

Status and changes are the basis for any Vuex store.

• state is an object that holds the state of data.
• mulatations are also an object yet state methods.

Getter and actions are like the logical predictions of state and mutation:

• getters have methods used to simulate state access, and perform some preprocessing work, if necessary (data calculation, data filtering, etc.).
• Actions are methods to trigger mutations and handle code asynchronously.

Because this article is summarized, to know more than you can go to the following link: https://vuex.vuejs.org/

Component declaration is concise

Usually write the following:

We can rewrite:

Change param but not update component

Walls are simple, but when doing real projects, they meet a lot. The easiest way for me to fix it: <router-view :key="$route.fullPath">

Understand the functions of the Hook

Vue’s lifecycle hooks, in my opinion, is Vue’s heart, it’s simple, but it can handle most user activities.

This is a diagram of Vue’s lifecycle hooks. For more details about it you can read more .:

Structure

Structure will be the last thing I want to mention. Whether a project works well or not, whether the files are managed in a scientific way or not, we should learn the file management of vue.
Another person looking at your structure can also assess your level.
For more details about the structure of vue js, you can see my previous article at the link: https://viblo.asia/p/structure-a-vuejs-project-jvElawWDKkw

Last words

Thank you for reading my shared article briefly but I hope it can help you a little something for your work.
Hope you can Upvote My article.