State management is something you will ultimately have to deal with as you create increasingly complex frontend applications. Thankfully, with the help of Vuex, this isn’t as hard as you may think!
In order to install
vuex, you will have to use either
npm like so:
Setting up Vuex
Once you have successfully installed Vuex in your VueJS application, you can set your application to use it by doing the following within your
We then have to define our
/src/store/index.js file which will contain our
Vuex.Router() object which we’ve imported and used in our
main.js file above.
So, there are 5 core concepts you will have to become familiar with if you wish to use
vuex as your application’s state management system.
State is the object representation of your applications state. This could be as simple as this if we wanted to store a ‘name’ value within our application:
Mutations within the
vuex world allow us to update the
state of our application. These are very similar to event handlers and each mutation has a string type and a handler.
Effectively, if you wished to update the
name within our
state object above, you could do so through a
mutation has to be invoked through the use of an
action which we’ll cover in the next section.
Let’s have a look at how we would create a
updateName mutation which would allow us to change our
name value within our
Actions allow us to
commit mutations. What this means is that should we wish to update the
name of our
state object above, we would trigger an action using the
store.dispatch() method and passing in the string name of the action we wish to call.
The main reason we have this level of abstraction away from our
mutations is so that we can make asynchronous requests. All mutations have to be synchronous, so by having our
actions perform any asynchronous code and then
commit-ing the result to a mutation, we manage to get round this.
Whenever we trigger the
updateName action, the
name stored within our
state object will subsequently be updated to
We can trigger an
action by doing the following:
Due to the way we have registered our
vuex store within our application, you can typically trigger this like so:
There are some situations where we need to get compute a derived state based on stored state. For example, say we wanted the first initial of our
name value that we have already stored, we could define a
Getter that would compute this for us, cache the result and then return the result.
This caching is a major benefit and can help us to improve the performance of our application.
Getters also refresh the cached result should any of the data that our result dependes upon be changed.
For example, if we had a
name set to
elliot originally, and we had a
getter that returned
e as the first initial, this
e result would be cached for us. However, when we update the name by dispatching an
action, this result would be updated to
S as that would be the initial of
If you are doing more expensive operations such as filtering a large list of objects then this starts to become more beneficial.
Still under construction
Hopefully, you found this tutorial on
vuex useful and it showed you everything you need in order to get started using it within your own Vue.js applications.