Manage application state with Vuex

When creating a web application, at some point we ask ourselves how to manage its state? Vue provides us with a way to manage it within the same component, the approach is very simple, and it works great. But what if the application has many components that should have access to the same data? One solution to this problem is Vuex, a tool for centralized state management. In this article we will look at what it consists of and how to use it.

What is Vuex?

The official documentation for Vuex is described as follows:

Vuex is a state management pattern and application library on Vue.js. It serves as a central data repository for all components of the application and provides predictability of data changes using certain rules.

Better understand the location of Vuex in the application will help the following scheme:

As you can see, storage becomes a kind of link for all other parts of the application. A detailed description of this is in the documentation, ( including in Russian ), the purpose of this article will be a quick dive.

In order to start using Vuex we need to connect it to our project - this can be done via npm, or simply connect the library with cdnjs . We will not focus on this attention, but proceed directly to the creation of the base repository:
')

Vue.use(Vuex) const store = new Vuex.Store({ state: {}, actions: {}, mutations: {}, getters: {}, modules: {} }) 

The repository consists of five objects, each of which plays a certain logical role in the application. Consider them in order.

State

Here we define the data structure of our application, and we can also specify default values. In order not to be unfounded, let's decide what we will write an application for notes. Accordingly, in the storage you need to put an array with notes:

 state: { notes: [] } 

Actions

In this part, methods are declared that will cause any changes to the repository. Here we can make a request to the server, and after receiving the response cause a state change. Actions can be called from components using the dispatch method. We will still see it in action, but for now just add a method to add a note. Since we don’t have a server, it will only contain the following:

 actions: { addNote({commit}, note) { commit('ADD_NOTE', note) } } 

commit is a way to cause a mutation, a change of state. Naming mutations with capital letters is not obligatory, but it has its own meaning - if the code contains such a method name, we can be sure of its purpose (it changes state).

Mutations

In mutations, the state changes. There cannot be asynchronous function calls, computations, etc. - only state change. In our example with adding a note, it will look something like this:

 mutations: { ADD_NOTE(state, note) { state.notes.push(note) } } 

Getters

In order to use the data stored in the repository, they need to get from there. And often we need not just data, but only some of them - we want to apply some kind of filters to them. Getters give us this opportunity. In the basic version, we can simply return the notes in the form in which they are:

 getters: { notes(state) { return state.notes } } 

Modules

As the application grows, storage increases and the ability to split it into parts becomes more and more popular. The modules allow you to split one storage into several repositories, but at the same time store them in the form of a single repository tree.

 const moduleA = { state: {}, mutations: {}, actions: {}, getters: {} } const moduleB = { state: {}, mutations: {}, actions: {}, getters: {} } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // ->   moduleA store.state.b // ->   moduleB 

More information about modules and namespaces can be found in the documentation .

Moving from words to deeds

Having dealt with what Vuex consists of, let's assemble our mini-app. To begin with, combine the five parts discussed above in the repository and pass it as an argument to the Vue object, in order to use it. The storage will be available through this. $ Store and in the child components. You will also need the addNew method to add a new note. Note the use of the getter and the dispatch method for working with the repository.

 const store = new Vuex.Store({ state: { notes: [] }, actions: { addNote({commit}, note) { commit('ADD_NOTE', note) } }, mutations: { ADD_NOTE(state, note) { state.notes.push(note) } }, getters: { notes(state) { return state.notes } } }) new Vue({ el: '#app', store, computed: { notes() { return this.$store.getters.notes; } }, methods: { addNew() { this.$store.dispatch('addNote', { text: ' ' }) } } }) 

Thus, we made the simplest application that allows you to add and store notes. It remains to add markup to display them on the page. Source code is available in the sandbox on codepen .

Conclusion

We looked at the Vuex device and a basic example of its use. As you can see, the tool is simple and intuitive. But you need to understand its scope. When creating a simple application, like what we wrote above, using Vuex seems unnecessary, but as the application grows, it can become an indispensable tool in managing the state.

Documentation in English
Documentation in Russian