Vuex Store Getters

Posted on  by admin
Your browser does not support the audio element.

Vuex is a state management pattern that doubles up as a 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 as dictated.

As Redux is to React, Vuex is to Vue but the main difference is that Redux state is always immutable while Vuex uses mutations to change its state.

Its granular reactivity system gives efficient updates and the well-structured design makes it easier to fetch, commit and compute derived data.

Vuex helps in dealing with shared state management efficiently between your Vue components.

It may feel a bit verbose at first but as your app starts scaling up, it fits conveniently and its structure starts making more sense.

Vuex is inspired by Flux, Redux, and The Elm Architecture, taking in the best of all the three.

The state is centralised in the store at app-level.

The only way to update the state is through mutations, which are synchronous transactions.

Asynchronous transactions are done through actions.

Computing derived data based on store state is done through a provision called getters.

Store can be divided into modules with each having its own state, mutations, actions, and getters.
Vuex gives us the ability to store and share reactive data without trading off performance, testability and maintainability.

With its reactivity system, we don't have to keep track of state changes and prop drilling. This is demonstrated in the image given below:. Let's create a shopping cart and integrate Vuex to show real-time updates in this article!!

You should have a basic understanding of Vue.js and its architecture.

Install Vue CLI if not already installed using the following code snippet:npm i @vue/cli -g. Create a folder with the name of your project, for example, say Shopping Cart. Open the terminal in your root project and enter the command function.

Execute the following command to proceed:vue create .

It will then ask us to select a preset, and click on manually select features so that we can cherry-pick the required features.


Not the answer you're looking for? Browse other questions tagged javascriptvuejs2vuex or ask your own question.