Learn about Vuejs

Learn the basics of Vuejs

VueJs is currently one of the best JavaScript frameworks and it is possible that Vue will gradually replace Angular and React in the future. If you do not know anything about VueJs this is not the article for you to read, you can come back here to know the basics of VueJs.

1. What is Vuex?

Large applications tend to become more and more complex due to the many different state components and the communications between them. Flux and Redux are two names that are not unfamiliar to the React community, and to the Vue community we are provided with vuex by Vue.

Vuex is the official state management library, inspired by Elm . Vuex is even integrated into vue-devtools , providing time-travel debugging without needing to install anything.

2. How Vuex works

Vuex operates under a “one-way data flow” model with components

Let me consider the following example to better understand:

• State : Where the data is retrieved for the application execution.
• View : Function of mapping declaration with State.
• Action : Modes of state change in response to user input from the View.

Below is an extremely simple demonstration with the concept of “one-way data flow”.

one-way data flow

However, this simplicity will quickly be broken when we have many ” components ” using the same state like:

Multiple ” views ” may depend on a generic part of the ” state “.

These different actions from the view to change each part of the “state”

• With the first problem it might be possible to handle placing nested views and simply not working with ” components ” of the same level.
• The second problem is that we often find our own solutions such as going directly to the associated parent / child instances or trying to change the data and will synchronize these copies of the state across ” event ”.

However both of the above methods are fragile and can quickly lead to the inability to maintain the source code.

Vuex has seen this problem and has passed shared states across components and managed them in a single global machine. Now components become views and components can access state or trigger actions, no matter where they are located in the application.

The basic concept behind Vuex was inspired by Flux , Redux and The Elm Architecture . Vuex is a library of implementations specifically for VueJs to take advantage of the advantages and update the most effectively.

3. Components in Vuex:

State:

• Vuex uses a ” single state tree “, which means that this object contains all the state layers of your application and serves as a ” single source of truth “, a concept of data. are retrieved from a single source). This also means there is only one single storage space for each application, making it simple to be able to correctly identify a specific part of the state and make it easy to retrieve images. The current (snapshot) of the application state for debugging purposes.

Getters:

• Used until it is necessary to retrieve the state value through a calculation that has changed the original state, for example filtering out values ​​that do not meet certain conditions. Using getter is necessary to avoid duplication of methods serving different components or to avoid having to get it back from a shared helper and re-import it in places of use. Mutations: The only way to be able to change state in Vuex is by committing a change. Vuex mutations are similar to events: each change has a type and a handler.

Actions:

• Similar to mutation but with a few differences. Actions are asynchronous activities and mutations are synchronous operations. Since Vuex learned to design one way data flow from systems such as Flux, Redux … so mutations are synchronous and one-way operations to change state data. Actions usually contain actions such as retrieving data from the API or an action that changes data in the database (add, edit, delete).

Modules :

• Since Vuex uses a state tree, all application state is contained within a large object. However, when the application expands, the store can expand a lot. To solve this problem, Vuex allows us to subdivide the stores within the module. Each module can contain states, mutations, actions, getters or even nested modules.

4. When to use Vuex in the app

Vuex is useful when you need data for more than 2 components, or when there are more than 2 components that need to share data but there is no parent / child relationship between them.

If you do not build a large application SPA (Single Page App), you should not use Vuex, it can make you feel exhausted or discouraging you. Even bus might be better for small applications or maybe a simple store pattern.

Do not use Vuex as soon as you feel you do not need it.

5. What’s new about Vue 3?

Vue 3.0.0 was officially released not long ago (read: 21 days: v). As a major version, Vue 3 was introduced with a lot

Advantages:

• Performance improvements
• Lighter bundle
• Better TypeScript integration
• New APIs help work better with large-scale projects
• Create a solid foundation for Vue’s long-term development
• Along with that is a fairly long list of Breaking Changes.

These are the prominent strengths of King 3. I will talk more about each of the advantages in the next part of the article.

6. References.

• https://vuejs.org/v2/guide/