I have recently been working on a project in Vue.js and, overall, have had a very positive experience. Because of the requirements for this particular project, I felt I needed a state management solution. This resulted in me diving into learning about and implementing Vuex in my project and I just wanted to share what I found to hopefully help others in the future. To start what exactly is Vuex?

What is Vuex?

According to its documentation, “Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.” Vuex allows for unidirectional data flow within the application. It is influenced by Flux and is pretty similar to Redux as well.

When Might You Benefit from Using Vuex?

Vuex is useful when passing state between many components. This is even more important when you have deeply nested components or many sibling components. Passing state between these components can become rather complicated quickly so it is beneficial to use a centralized store to keep organized. This was the case with my particular project. I had lots of sibling components that benefitted from sharing a centralized store compared to trying to pass the data between them.

Setting Up Vuex In Your Project

To get started you’ll need to install Vuex through NPM or Yarn. Here is the documentation for either way but I’ll detail NPM below. This assumes you already have a Vue project set up. In your project’s directory run the following in the terminal:

Now within your /src directory, create a new folder called /store . This is where our Vuex setup will be located. From here we need to do a few things to get up and running. Let’s first create a /modules folder and an index.js file in the /store directory. The modules folder will contain the different stores (if more than one is necessary). For example, one of my modules is called UpgradesOwned.js as it tracks upgrades a user makes in the project/game I am working on.

The Basic Makeup of a Store

Here is the basic file structure of a store file. We’ll detail what each does below.

The last part can be simplified even further with ES6

Let’s detail each of the 4 parts above:

  • State: This is the state of the application. If you are familiar with Vue, it is similar to how data is used in the components. State is read only
  • Getters: This is how we will access the data in our components. Getters can read the state value but it cannot mutate/change the state
  • Mutations: This allows us to update the values in our state. They are always synchronous. Mutations act as the only way to change values in the state
  • Actions: This will allow us to indirectly update the values in our state asynchronously. In order to actually update the state they will need to call on mutations. This might be useful when you need to get/send data to a server or perform multiple mutations at once

Before we move onto accessing and using these in your components, let’s finish up setting up our store. In the index.js file we will need to import Vue, Vuex, load Vuex, and export our store. Let’s take a look at a boilerplate example.

The last thing we need to do for our set up is to import our store in main.js . Here is how my file ended up looking.

The reason we could just use ./store is because we named our file index.js , which is a default name. If we named that file something else, you would have to specify it specifically in the file path. However that does it for set up of Vuex in our project. Now let’s look at using our state in our Vue components.

Accessing State in Your Vue Components

The basic structure of accessing your state and manipulating it in your components is as follows:

  • State: this.$store.state.nameInState
  • Getters: this.$store.getters.nameOfGetter
  • Mutations: this.$store.commit.nameOfMutation
  • Actions: this.$store.dispatch.nameOfAction

Let’s look at a couple of examples for using getters and mutations to hopefully solidify how to use state in your components. First we’ll create a store module. This is a simple implementation of state from the game I’m working on. It basically tracks how many business upgrades a user purchases.

Here you can see we are tracking total number of upgrades in our state, currently at 0. We also have a getter that takes in the state as an argument and returns the value in state we want. Finally we have a mutation that takes in state and increments the value of total upgrades owned by 1. Pretty simple implementation. One thing to note is in the mutation (or an action) we can pass in additional values if necessary. In this case I did not have the need but it is possible by the following:

Finally let’s turn our attention to your component. Here is a basic component implementation utilizing the getter and mutation we created above.

We have a few things going on here. First in computed we get our total upgrade purchased from our state. We can then access that value in our template by referring to the computed property upgradesOwned() in double curly braces.

Next we want to increment our total number of upgrades owned by 1 when a user clicks on the purchase button in the template. We can do this by calling our increment() method on click of the button. The method then calls our mutation in our store file with this.$store.commit('incremrntTotalUpgradesOwned') . Because our state is changed, the computed property will recompute and the addition of our purchased upgrade will be reflected in the DOM.

Wrap Up

Hopefully this gives you a better idea on how Vuex is set up and used in a view application. There are many more things that you can do to achieve your ideal functionality. This was just an introduction. It is something I was really struggling with initially so hopefully it’ll be more clear for you. If you are still struggling or looking for more information, I highly suggest Sarah Drasner’s course on Vue (which includes a section on Vuex) on Frontend Masters. I really think it (and of course additional courses) is worth the price. Good luck going forward with Vuex!