Vuex: What is it? Simple guide for the beginner

What is Vuex?

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. It also integrates with Vue’s official devtools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.

When Should I Use It?

Vuex helps us deal with shared state management with the cost of more concepts and boilerplate. It’s a trade-off between short term and long term productivity.

If you’ve never built a large-scale SPA and jump right into Vuex, it may feel verbose and daunting. That’s perfectly normal – if your app is simple, you will most likely be fine without Vuex. A simple store pattern may be all you need. But if you are building a medium-to-large-scale SPA, chances are you have run into situations that make you think about how to better handle state outside of your Vue components. And Vuex will be the natural next step for you.

Using Vuex: Step by step guide

I won’t be going in depth about using Vuex. These are some fundamental concepts about using Vuex. This section will have some simple examples for changing state in Vuex store and retrieving state.

The first step is to install Vuex.

npm install vuex

It is better to keep all Vuex logic in a separate file. We will keep our logic in a file called store.js. Of course, you can name it anything you want. We will have our store object in this file and then import it into main.js where we will register it with the global Vue instance.

vuex

In our store.js file we have a store object that is our Vuex store. We need to have some data in our store that will be then mutated or changed and retrieved by other components. In addition, we can add data to our store using the pre-defined keyword state. Moreover, we can use it as we use data() in regular Vue instances. In our store, we already have a counter data property. Now we need to retrieve it from a component. Here, $store keyword is available to us since we registered our Vuex Store in the main.js file.

initial App.vue component

Now there is another concept you would be using a lot when retrieving data. There can be situations where you need to work on the data or carry out some math operations before using it. If this work is different for different components, then there is no choice but to implement it separately for each component. But if the operation is the same for all components, then you can use getters. Using getters, we can perform operations on our data and then retrieve the final result.

Also read:
Vue router: Its complete look you need to explore for software development

getter feels similar to a function. But it is different. That’s because a getter requires the state object. This is passed to the getter automatically by Vuex. We have used our counter data property for keeping track of the number of times a button is clicked and then we retrieve it. So how about we double the number of clicks before displaying them. We can use a getter to achieve this result.

Declaring getters in our store

We have created our getter. Let’s use it in our App.vue component. Keep in mind that we have to use our getter so we can’t use this.$store.state. For getters we use this.$store.getters.

Using getters in our App.vue component

Remember to use the name of the getter only. In our example, this would mean using doubleClicks and not doubleClicks(). That’s because there is no need to run it even though it might seem like a regular function. Think of it as when attaching a callback function to an event listener. Like how that callback gets called automatically, getters are automatically called and executed by Vuex.

Finally, we will see mutations. When mutating the state of a data property, you simply commit that mutation. The changes to be done to the data property are specified in the mutation. The state can then be changed from any component and still be updated the same way.

We change our counter data property by manually incrementing it. Let’s instead create a mutation for it. mutations also need access to the state object in order to mutate it.

vuex setting

When it comes to using mutations it is a bit different. Unlike with getters and state, mutations are not accessed like this.$store.mutations. Instead as mentioned before, a mutation is committed and we specify the name of the mutation in parenthesis.

vuex app

Here, we tell Vuex to commit the mutation called increment or in other words – execute the mutation called increment.


To Sum Up

These were quite simple examples and you shouldn’t use Vuex in such a scenario. But I hope you were able to understand some fundamental concepts for using Vuex.

With this, you have learned the necessary concepts to start exploring the advanced uses of this state management tool. You should now be able to decide if a project needs Vuex and how to go about using it.

Want to work with web development company?

A development company is the best option if you’re planning a mid-sized or large project but don’t have your own team. To clarify, the biggest advantage of a software development company is that they can take ownership of the whole project.

If you’re considering web development services, you can explore more about us – ArrowHiTech. We are proud to be one of the most well-established outsourcing companies all around the world. In addition, with over 12 years of experience, we can provide the best software development services for your eCommerce business.

So, you can check us out now: ArrowHiTech services. Also, if you want to go through our showcase, you should visit our product page here: MageSolution or our portfolio: ArrowHiTech portfolio.

ArrowHiTech services

If you have any questions, don’t hesitate to contact us via:

  • Email: support@arrowhitech.com
  • Phone number: +84 243 7955 813.