Можливо, вам не потрібен Vuex

Vuex — бібліотека для управління станом вебзастосунків, вона досить проста та легко інтегрується з Vue. То навіщо ж комусь відмовлятись від неї? Річ у тім, що новий Vue 3 з коробки пропонує реактивність, а також нові способи структурування застосунку. Ці зміни настільки глобальні, що можна централізувати управління станом без будь-яких додаткових інструментів.

Чи потрібен вам спільний стан

У складних застосунках компоненти використовують стільки даних, що часто доводиться централізувати їх для декількох компонентів. Вам потрібен спільний стан, якщо:

• декілька компонентів використовують ті самі дані;
• існують різні ієрархії компонентів з даними;
• є велика вкладеність компонентів.

Якщо у вашому проєкті немає нічого з цього переліку, то й Vuex вам не потрібен.

Але якщо є хоча б один пункт? Тоді все ж зверніть увагу на Vuex, це надійний та перевірений часом інструмент для роботи з подібними проблемами.

Для тих розробників, які не хотіли б додаткових залежностей чи складних налаштувань, Vue 3 у тандемі з Composition API підготували спеціальні методи для управління станом.

Новий підхід

Спільний стан повинен відповідати таким критеріям:

• реактивність: під час оновлення стану також оновлюються компоненти, які його використовують;
• доступність: стан можна отримати з будь-якого компонента.

Реактивність

Vue 3 реалізує реактивність за допомогою спеціальних функцій. Ви можете створити реактивну змінну за допомогою функції reactive (або альтернативної функції ref).

import { reactive } from 'vue';

export const state = reactive({ counter: 0 });

Функція reactive повертає об'єкт Proxy, який відстежує зміни власних властивостей. Якщо реактивне значення використати в шаблоні компонента, то з кожною його зміною компонент буде повторно рендеритись.

<template>
  <div>{{ state.counter }}</div>
  <button type="button" @click="state.counter++">Increment</button>
</template>

<script>
  import { reactive } from 'vue';

  export default {
    setup() {
      const state = reactive({ counter: 0 });
      return { state };
    }
  };
</script>

Доступність

У прикладі вище станом користувався один компонент, а от інші не мали до нього доступу. Аби зробити стан доступним для декількох компонентів, Vue 3 пропонує методи provide та inject.

import { reactive, provide, inject } from 'vue';

export const stateSymbol = Symbol('state');
export const createState = () => reactive({ counter: 0 });

export const useState = () => inject(stateSymbol);
export const provideState = () => provide(
  stateSymbol, 
  createState()
);

Коли ви передаєте Symbol як ключ для значення в метод provide, то таке значення стане доступним для будь-якого дочірнього компонента, якщо він використає inject. Ключ типу Symbol буде використовуватись як для збереження, так і для отримання значення.

Отже, якщо ви передасте значення за допомогою provide у найвищому компоненті ієрархії, воно буде доступним для кожного компонента нижче. Ви також можете використати provide в головному екземплярі застосунку.

import { createApp, reactive } from 'vue';
import App from './App.vue';
import { stateSymbol, createState } from './store';

const app = createApp(App);
app.provide(stateSymbol, createState());
app.mount('#app');

<script>
  import { useState } from './state';

  export default {
    setup() {
      return { state: useState() };
    }
  };
</script>

Надійність

Хоч наш варіант управління станом працює, у нього є важливий недолік: ми не знаємо, хто модифікує дані. Будь-хто може напряму змінити стан без жодних застережень.

Аби захистити стан від випадкових змін, огорнемо його у функцію readonly. Вона огортає передане значення об'єктом-посередником, який попереджає будь-які зміни (ви побачите застереження). Змінити дані можна за допомогою окремих функцій, які мають доступ до сховища.

import { reactive, readonly } from 'vue';

export const createStore = () => {
  const state = reactive({ counter: 0 });
  const increment = () => state.counter++;

  return { increment, state: readonly(state) };
}

Тепер не можна модифікувати стан напряму — лише за допомогою спеціальних функцій. Подібний підхід із захистом від неконтрольованої зміни стану дуже схожий на методи Vuex.

Підсумуємо

За допомогою реактивної системи та механізму впровадження залежностей Vue 3 ми перейшли від локального до централізованого управління станом. Такий підхід може стати заміною Vuex у невеликих застосунках.

У цьому випадку передбачається, що ми маємо об'єкт стану, доступний лише для зчитування. Він реактивний, тому на його зміну реагують компоненти. Такий стан можна модифікувати лише за допомогою спеціальних функцій Vuex. Додаткові гетери можна оголосити за допомогою функції computed.

У Vuex існують й інші фічі — наприклад, обробка модулів. Однак додаткові ускладнення не завжди потрібні.

Якщо ви хотіли б спробувати Vue 3 та його новий підхід до управління станом, автор підготував для вас спеціальну пісочницю.