Vuex is a state management pattern
Tags: vue, vuex, javascript
Published: 2021-06-22 11:36:48


## Vuex

Vuex is a state management pattern + library for Vue.js applications

![](https://cdn-images-1.medium.com/max/2000/1*KIoNyRO6s_52W68Y-0usJw.png)
>  **The state**, the source of truth that drives our app;
>  **The view**, a declarative mapping of the state;
>  **The actions**, the possible ways the state could change in reaction to user inputs from the view

## Usage

To understand Vuex it’s much easier if you first understand the problem that it’s designed to solve.

1 - Sharing data between components especially from child to 
    parent now it’s much easier .

2 - Imagine you have centralized store for saving every single 
    data and this store shared between all other components Dreams 
    come true .

3 -  Make your asynchronous requests in one place for dealing with 
     API so , your integration become more organized and secure .

## Installation

### NPM

    npm install vuex --save

### Yarn

    yarn add vuex

When used with a module system, you must explicitly install Vuex as a plugin:

    import Vue from 'vue'
    import Vuex from 'vuex'

    Vue.use(Vuex)

You don’t need to do this when using global script tags

### CDN

    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>

## Structure

### State

Single object contains all your application level state and serves as the “single source of truth.” This also means usually you will have only one store for each application

![](https://cdn-images-1.medium.com/max/2000/1*6YNOp0NaGVUwsVs7YW52tg.png)

![](https://cdn-images-1.medium.com/max/2000/1*D47HMb6HCvJunFPMOhbcUw.png)

![](https://cdn-images-1.medium.com/max/2000/1*1bkaKk6bG8C1VVJG64bm_Q.png)

### Getters

Used to compute derived state based on store state , vuex allows us to define “getters” in the store. You can think of them as computed properties for stores. Like computed properties, a getter’s result is cached based on its dependencies, and will only re-evaluate when some of its dependencies have changed.

![](https://cdn-images-1.medium.com/max/2000/1*nzYEvVSRpDdkmAovYmRxLw.png)

![](https://cdn-images-1.medium.com/max/2000/1*2nxzAH_0gS7obklyHzmE4A.png)

### Mutations

This is the only way to actually change state in a Vuex store is by committing a mutation.

![](https://cdn-images-1.medium.com/max/2000/1*Ru4L1cOZv0Wrm58eXLmhJQ.png)

![](https://cdn-images-1.medium.com/max/2000/1*ug00t0Qp48r32fdh7pv3Ng.png)

### Actions

Actions are similar to mutations, the differences being that:

* Instead of mutating the state, actions commit mutations.

* Actions can contain arbitrary asynchronous operations.

![](https://cdn-images-1.medium.com/max/2000/1*sy1Wpwoce-FrvEGSQkEU1Q.png)

![](https://cdn-images-1.medium.com/max/2000/1*7eGMqY-jAfAYzgAe8B65Dw.png)
>  ***As you can see in the [**Vuex docs](https://vuex.vuejs.org/guide/state.html#the-mapstate-helper),**, it comes with examples***

## Conclusion

Vuex provides advanced topic and utilities than we were able to cover in this article.

*This is a mere introduction to it, and by no means a comprehensive one. But we covered the part that is most often the biggest obstacle to adoption: understanding the concept and usage .*