What is Vuex?

In short, Vuex allows you to centralize information and features of the app that are accessible through any component.

What problem does it solve?

When you work with a library like Vue, the component information is transported from a parent component to a child component through "props" and vice versa through emiting an event that the parent component will hear. Sometimes you need to access information from one component to another which don't have the father-son relationship. How are you going to get them to comunicate then? Technically it can be done, but it can be very complicated ending up with business logic spread all over the app which it's likely to repeat itself. This is where the centralization of that information comes in with tools such as Vuex, in Vue, or Redux, in React. You can not only centralize information but also functions.

Its structure

Vuex is distributed as follows:

State (in the code state):

  • It's an object that can contain any type of information: strings, arrays or other objects.
  • It's information stored centrally throughout the app.

Mutations (in the code mutations):

  • They are functions.
  • They are the only functions that can modify the state.
  • They are called by the actions.
  • They can be initialized in the component to be used through commit or initialized through an action.
  • They are synchronous.

Actions (in the code actions):

  • They are functions.
  • They have the business logic.
  • To change the state they must call mutations via commit.
  • You can call other actions through dispatch.
  • The way to initialize them in the component is through dispatch or using modules.
  • They are asynchronous.

Getters (in the code getters).

  • They are functions.
  • They don't change the state but they do format it so that we can use that information in the way we need it.
  • It would be very similar to a computed property in the component.
  • An example would be a function that filtered the state. It doesn't modify it but it returns a new different object with the filtered data that you need.