What is Vue.js?

Vue.js is a framework based  on reactive componente, used specially for web interfaces creation. Vue.js was created to be simple, reactive, based on componente and compact.

What is Flux?

Flux is not a framework, architecture of language. It’s a concept. When we use Flux in Vue (or any other language/framework) we créate an unique way to update data that enseres every thing is right. This way to update data also enseres that the view components also keep the right state. This is really important to complex. SPAs (Single Page Applications), that has plenty tablas and screens, and of course events and data changes all the time.

Why use it

When creating complex SPAs we can’t work with all the application data in global variables taken that in a certain moment they would be too many to control. And resides that, keeping the right state of each system point becomes a  real trouble for the developer.

For example, with a shopping cart it’s necessary to test all the different interface variations after including ítems to it. With Vuex it’s possible to have a better control of those states. It’s possible, for instante, to load a state with 10 ítems in the cart without adding them manually, saving time. It’s also possible to work “unplugged” from the API.

Unit tests also benefit from Vuex since you can go to a specific state of the app by quickly changing its data.

When to use it

Use Vuex in production applications. To learn Vue basics it’s not necessary to use Vuex. But it’s recommended for any production application.

Basic concepts

To understand Vuex it’s necessary to know the following concepts:

Store

Store is the main Flux/Vuex concept. It’s where the application state is stored. When we say state we are talking about a group of dozens of variables to store data. As we know, Vue has a reactive visualization layer that observes variables and changes its content accordingly. The Store in Vuex is where the variables are stored, where the states are stored and where the View will observe for changes.

Action

Defined as the action that can change a state. An Action is the only thing that can change a state’s information. This means that instead of changing the Store directly, you will call an Action to change it.

Mutation

A “mutation” can be described as the “event that changes the store”. The Action will change the Store vía “mutations”. Only the Mutations should directly access the Store variables.

Getters

Getters are metidos responsible for observing the variables int the Store and provide it to the application. It ensures that changes to the Store will reflectores to the application.


 

As you can see, the application never access or changes a Store variable directly. There’s a lux to be followed in order to keep every thing in its place. The next image illustrates this flux:

Vuex illustration (Vue.js + Flux)

 

Deja un comentario