# Vuex
## What is Vuex?
>
* A **state management pattern** + **library** for applications
* It serves as a `centralized store` for all the components in an application, allowing state to be changed in a predictable manner
\
## When Should I Use It?
* Vue has a **one-way data flow** => simplicity
* If there are **multiple components** sharing a **common state**, the simplicity degrades
* The shared state must be extracted from the components and managed as a global **singleton**!
* This allows all components to **access** state or **trigger** actions regardless of where they are in the tree
* It improves code **structure** and **maintainability** by defining and separating concepts related to state management and specific rule enforcement
* Vuex is useful for shared state management, but it can take longer to develop since you need to learn the concepts
* If the app is simple, it's not necessary, but for building **medium to large-scale SPAs**, it is recommended to use Vuex!
* Refer to the `Flux` library!
\
## Four Properties of Vuex
### 1. `state`
* Can be seen as data in a Vue component
* Serves as the **source of truth**
* The **model** directly connected to the View
* Cannot be changed directly
* Can only be changed through `mutations`
* When state changes through mutations, the View is **reactively** updated
### 2. `mutations`
* The only way to change `state`
* Similar to **events**
* Implemented as functions
* First argument: `state`
* Second argument: `payload`
* The payload can be an object containing multiple fields
* Generally cannot be called directly
* Only possible through **commit**
### 3. `action`
* Similar to `mutation`, but unlike `mutation`, **asynchronous operations** are possible
* Can commit to mutations
* Can receive a **context** argument as the first argument
* The **context** argument includes properties such as `state`, `commit`, `dispatch`, and `rootstate`
* The second argument can be received as a **payload**, same as mutations
* Can be called through **dispatch**
* In practice, it is used for making API calls through **Axios** and either returning the results or committing to mutations to change state
### 4. `getters`
* Same as **computed** in a Vue component
* They are computed properties
* You can perform some operation on a specific state and bind the result to the View
* Depending on whether the state changes, the getter is recalculated and the View is updated as well
* However, the state remains unchanged as the original data!
\
## Usage
> Add vuex
```bash
vue add vuex
```
\
\