Що таке менеджер стану?

VueJunior~1 хв читання

Менеджер стану (state manager) - це інструмент або бібліотека, яка відповідає за зберігання, зміну та синхронізацію спільного стану застосунку між різними компонентами.

Простіше кажучи:

Менеджер стану - це централізоване сховище даних, до якого можуть звертатися всі компоненти, щоб отримувати або змінювати спільний стан.

У контексті Vue такими менеджерами є:

Vuex (Vue 2 / Vue 3, класичний підхід)
Pinia (рекомендований менеджер стану для Vue 3)

Навіщо взагалі потрібен менеджер стану?

Коли застосунок маленький - достатньо props/emits. Але коли він росте, з'являються проблеми:

1. «Props drilling»

Дані доводиться проштовхувати через багато компонентів.

2. Складно передавати дані «вгору»

Emit працює тільки від дочірнього до батьківського.

3. Кілька компонентів використовують ту саму логіку

Наприклад:

авторизація
кошик товарів
налаштування користувача
фільтри
тема (dark/light)

4. Стан розрізнений

Незрозуміло, хто і де змінює дані.

Що дає менеджер стану?

1. Єдине сховище (central store)

Усі дані - в одному місці.

2. Передбачуваність

Усі зміни підпорядковані певним правилам (actions, mutations).

3. Спільні дані доступні всім компонентам

Не потрібно прокидувати props.

4. Легко дебажити

Є devtools → видно історію змін.

5. Спрощує великі застосунки

Розділення на модулі та під-сховища.

Приклад менеджера стану (Pinia)

import { defineStore } from 'pinia'

export const useCounter = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

Використання:

const counter = useCounter()
counter.increment()
console.log(counter.count)

Приклад менеджера стану (Vuex)

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

Коли менеджер стану обов'язковий?

авторизація/поточний користувач
кошик товарів
глобальні налаштування
кілька компонентів мають читати/змінювати одні й ті самі дані
складна логіка фільтрів
чати, сповіщення, real-time дані
великі SPA

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.