> For the complete documentation index, see [llms.txt](https://d-ukolov.gitbook.io/vue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://d-ukolov.gitbook.io/vue/vuex/vvedenie.md).

# Введение

В центре любого Vuex-приложения находится **хранилище(store)**.

**Хранилище** — это контейнер, в котором хранится **состояние** приложения.

&#x20;Два момента отличают хранилище Vuex от простого глобального объекта:

1. Хранилище Vuex реактивно. Когда компоненты Vue полагаются на его состояние, то они будут реактивно и эффективно обновляться, если состояние хранилища изменяется.
2. Нельзя напрямую изменять состояние хранилища. Единственный способ внести изменения — явно **вызвать мутацию**. Это гарантирует, что любое изменение состояния оставляет след и позволяет использовать инструментарий, чтобы лучше понимать ход работы приложения.

```javascript
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
// Теперь можно получить доступ к объекту состояния через store.state
// и вызвать изменение состояния с помощью метода store.commit

store.commit('increment')

console.log(store.state.count) // -> 1
```

Причина, по которой мы вызывается **мутация(mutations)**, вместо изменения `store.state.count` напрямую, в том,  что таким образом мутацию можно явным образом отследить.

Использование состояния хранилища в компоненте предполагает просто возврат необходимой части состояния в **вычисляемом(computed)** свойстве, поскольку состояние хранилища реактивно.

Инициирование изменений — это просто запуск мутаций в методах компонентов.
