Vuex crash course

VUEX is a state management library for Vue js. Its purpose is to provide centralized access to data across multiple components. You’ll often hear “single source of truth” when discussing state management and that just means we’ll have one place where all components can get the data from.

Why do we need VUEX

If you’re working with Vue js it might just be your best bet. That may not be the case for different developers considering people’s different preferences and the complexity of the project but I personally prefer vuex.

Not every project needs to have vuex and so you’ll only need vuex when the size of your application grows and the need to have the same data across different components comes. With large SPAs you might find yourself having to pass data between parent and child components, and vuex will make that easier.

How does it work

In a nutshell, you’re going to have a state where the data will be stored. The data in the state will only be changed (aka mutated) by mutations. Mutations are committed by actions. The last part is actions, they commit mutations so that data in the state can be changed.

1. State

Vuex has only one store for each application where all the data will reside. This doesn’t mean all your state has to be…